System Fonts in SVG

There was a time when the smart move in picking fonts for a website was to a font-family that was supported across as many platforms as possible. font-family: Tahoma; and whatnot. Or even better, a font stack that would fall back to as-similar-as possible stuff, like font-family: Tahoma, Verdana, Segoe, sans-serif;.

These days, an astonishing number of sites are using custom fonts. 60%!

No surprise, there is also a decent amount of pushback on custom fonts. They need to be downloaded, thus there are performance/bandwidth hits. There is loads of nuance on how you load them.

Also no surprise, there is some advocacy for the return to local fonts. Fast! Good enough! Let’s look at that for a sec, then also look at using them within SVG.

The trend isn’t just a return to local fonts but to what are being dubbed “system fonts”. The point isn’t so much a single font stack that looks consistent across browser/platform/version, but a single font stack that matches what that OS uses.

If the OS uses “San Francisco” in the UI, the font-stack should display San Francisco. If the OS uses Roboto, so it shall be. The actual font stack to do this is fairly thick. But that’s the point, just list a bunch of fonts in the order you want to use them and CSS will fall down the stack until it finds one it has.

Here’s what GitHub uses:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

The WordPress admin and Medium interface are currently using this:

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

The title of this post is about using these font stacks in SVG. There is nothing special or different or particularly interesting about this. You can apply that font stack via CSS inside the SVG, or just put it right on a text element:

<text font-family='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' font-size="18" font-weight="400" fill="black" x="50" y="50">
  Some Text
</text>

Setting text in SVG is kinda awesome, as it retains its accessibility and is ultra-flexible.

Again, the point of all this is to match the font used by the OS, so let’s take a look at that. OS X is particularly interesting as the system font has changed several times in the last few years.

OS 10.0 – 10.9 – Lucida Grande
OS 10.10 – 10.11 – Helvetica Neue
OS 10.12 – San Francisco

Chrome DevTools will not only show you the font stack when you inspect an element, but also the Rendered Fonts.

And here’s a totally different operating system:

Here’s a bunch of screenshots

Of this demo.

The metrics of the different fonts are a bit different. The text fits a little tighter and looser depending on what renders. But it’s not too far off. You might not set a typographic lockup with system fonts, but all in all, very usable.