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.
The
textLength
,lengthAdjust
, andfont-size-adjust
properties can help sync these up, for those SVGs where it matters.Demo pen: http://codepen.io/tigt/pen/MaeJEK
But how do you determine the text length of the webfont version? By inspecting the SVG manually? Seems tedious.
I’ve always wondered, why does the github font stack end with emojis? The WordPress one ends with “sans-serif”, which makes more sense to me.
I believe it has something to do with properly rendering emojis that are mixed with regular text.
What about licensing? i.e. you can’t just publish Helvetica Neue embedded in source.
Because you aren’t serving the fonts, these are already on the users’ device. It’s really no different than calling:
except instead of using the browser default, you are asking to use what the system default is