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.

Graphic design has rules, and they work … 👀 pic.twitter.com/NQMSAkSpgl

— Laurel Coons 🧬🧬🧬 (@LaurelCoons) June 4, 2022

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?