Stretchy Numbers Apple Watch Face via Variable Fonts

I just noticed this morning my Apple Watch has a slick face where thinking with the knob makes the numbers on the clock face stretch wide and narrow, to rather extreme degrees:

That’s the San Francisco font surely, which I recently discovered was a variable font as-installed on macOS. That gave me a little inspo to try and do it:

That will probably only work right if the system-ui font maps to San Francisco on your machine. Feel free to swap it out for a real variable font hosted somewhere, that’d be neat to see. I was thinking of trying to put in a test for that. I can see the Rendered Font in Chrome DevTools and see it’s .SF NS there:

Unfortunately document.fonts.check("12px '.SF NS'") is false (which might be a bug, but not entirely sure).

If you can’t see the effect on the Pen, well, it looks like this:

I was tempted to just set inline styles as you fiddle with the input[type="range"] there, but I decided to reach into the parsed document.styleSheet there and fiddle with the value there, which was a fun way to do it. Not sure I’ve ever done that before. Feels a little fragile.


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

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️