Variable Fonts Demo — Microsoft Edge Demos

Lots of 👏 for Microsoft this week: not only have they announced OpenType Font Variations support for their Edge browser, they also released this very interesting and technical "expedition" into the world of Variable Fonts. 

When Edge 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.

Now that we’ve covered what variable fonts are and how they can be used, it’s important to note that they can also be animated and interpolated. You may have noticed as you scroll down this page that the section headings animate in scale and font weight as they scroll into view

Dare I say it: this is actually a pretty good article to sum up why, when and how to use these techniques if you're a web designer or developer; Microsoft did a remarkable job at explaining how the axis work in these new font files, and how to correctly target the CSS you write to enable the OpenType features.

I love this CodePen ticket example they published. I won't sum up this article since you may not be interested in knowing the nitty-gritty details, but you might want to bookmark it for future reference.


Want to receive more content like this in your inbox?