Expanded San Francisco Typeface

I enjoyed seeing the WWDC video of the upcoming expansion of San Francisco, Apple’s everywhere typeface. It’s coming in some different widths now:

They all have the same height, which is a neat feature:

So with all that plus the rounded, plus the mono, plus sprinkling in the serif’d New York face, there are a ton of options:

This is a compelling example:

Hierarchy is so important to get right! You need options.

https://twitter.com/LaurelCoons/status/1533164215132987393

You can download the SF fonts free. My question is… what is the best way to use them on the web without having to @font-face anything. I know right now we can do font stacks like this to get our hands on San Francisco regular, San Francisco Mono, and New York (assuming you’re on a modern Mac):

html {
  --monospace: ui-monospace, SFMono-Regular, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: ui-serif, serif;
}

But it’s not year clear how we might tap into the condensed, compressed, and expanded varieties in CSS, or if there is even a plan to allow that. I suppose we can peek around Apple.com eventually and see how they do it if they start using them there.

Doesn’t this make perfect sense to construct as a variable font and ship the whole kit and kaboodle that way?

One response to “Expanded San Francisco Typeface”

  1. Dev says:

    There should totally be a variable system font for this. Apple, don’t drop the bag on this.

Leave a Reply

Your email address will not be published.