Variable Fonts

Similarly, many web developers have advocated a return to system font stacks, prioritizing performance over brand cohesion or design differentiation. Performance has the potential for major impact on user experience and a business’s bottom line, and so the web community needed to figure out how to balance this priority against the desire for beautiful typography.

To help solve this problem, one of the most impactful changes was made to the OpenType font format in collaboration by Adobe, Apple, Google, Microsoft and others. The solution was to enable font designers to provide various axes that could be adjusted dynamically by the software rendering the font, such as a web browser.

To show the beauty of this simple, but powerful capability; let’s achieve a similar designed sentence as our previous example, but this time using a single variable font.

1. This sentence is composed from three different non-variable font files.

2. This sentence is composed from one variable font

When EdgeHTML 17 ships, all modern desktop-based browsers will support font-variation-settings, except for Firefox, where it is behind a flag. On mobile, currently, Chrome and Safari 11.2 will support variable fonts, but UC Browser and Samsung Internet do not.

At time of writing, only EdgeHTML 17, Safari 11 on MacOS, and Safari 11.2 on iOS support font-optical-sizing.

As you can see, support for variable fonts is beginning to make its way into browsers as well as into fonts, so it’s wise to use variable fonts in a progressive enhancements manner. To see if a browser supports variable fonts, utilize the CSS @supports conditional check, like so:

@supports (font-variation-settings: "wght" 500) {
	/* variable font code here */
}

While this will check if the CSS parser understands font-variation-settings, it doesn’t necessarily ensure that the correct font is being selected. Take the following example:

font-family: "Bahnschrift", sans-serif;
font-variation-settings: "wght" 600;

This will result in users utilizing a Windows 10 device with the desired result, but unless you are providing a fallback copy of Bahnschrift from the server, anyone accessing your site using a different OS will render without any axis change. Because of this you should provide fallbacks and only utilize font-variation-settings for non-reserved axes so that no matter the font they’ll be styled similarly. For example a better approach would be:

font-family: "Bahnschrift", -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;

This will ensure that if the user is on Windows, Mac, iOS, Android result in grabbing their respective variable font. When using this approach however, you need to ensure that your design doesn’t depend on certain font metrics. If your design does depend on certain font metrics or a non-reserved axis then you should serve the font using @font-face, like so:

@font-face {
	font-family: "Decovar";
	src: url("fonts/DecovarAlpha-VF.ttf");
}

body {
	font-family: "Decovar";
	font-variation-settings: "TRMD" 400;
}