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.

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;
}Code language: CSS (css)

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?


I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

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. Required fields are marked *

Back to Top ⬆️