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.
Leave a Reply