I left my font on SF

September 18, 2015

I’ve butched the title’s reference beyond recognition.

Apple introduced a new typeface. It’s SF, short for San Francisco. It looks nothing like their old font with that name.

Example text

Unfortunately for now you’ll only see this font on iOS 9 or OS X El Capitan, but maybe that’s a good thing.

There was a time where I used custom fonts on this domain. Ideal Sans looked beautiful. Concourse looked great too, except in Chrome with its terrible text-rendering engine. Google’s own Roboto was very clean, and it was amazingly light when it came to filesize. Open Sans and Fira Sans were nice as well.

But I elected to go with something that didn’t need downloading and didn’t draw attention to itself — something boring and unnoticed.

I chose the generic sans-serif for my font family. On OS X and iOS it would display Helvetica. On Windows it would display Arial. On Linux it would display Vera Sans or some derivative thereof.

Or if you changed your sans-serif default, for personal preference or accessibility reasons, it’d show whatever font you chose.

Things should fit their surroundings. Modern houses are nice, but they look disgusting in craftsman neighborhoods.

When it comes to reading text, as most of this website is, maybe unique letterforms are distractions. Maybe what should be noticed are the thoughts, not the shapes they come in.

A benefit of sans-serif is that it fits the operating system around it.

I know Microsoft uses Segoe on its interface. Honestly it’s too distracting to read body copy in, but Arial doesn’t look out of place.

Ubuntu, a common Linux distribution, primarily uses its own font of the same name, but Vera Sans doesn’t look out of place there either.

OS X’s interface recently changed from Lucida Grande to Helvetica Neue, and Helvetica doesn’t look too different from that, so sans-serif worked there on OS X too.

But Apple recently rebranded its interface on both mobile and desktop platforms in SF, and maybe it’s a honeymoon period, but I think it looks pretty slick and easy to read. I want my text to match everything around it.

So I tried calling it and neither SF nor San Francisco worked. Luckily Apple’s WebKit blog had my back. The solution was adding -apple-system to my font stack, and should Apple ever change their system font again, it should still work.

I wonder how or if -apple-system looks different in other localizations, with their new system fonts…