Skip to main content
Guide Collection

Variable Fonts

Variable Fonts open up new possibilities for typography on the web, from granular control over styling to optimizations that make for super speedy and selective loading. This guide provides an overview of the concept along with relevant CSS properties and best practices that will help you wrangle custom fonts like a boss.

Monthly Sponsor
Thanks, Fauna

A New Responsive Font Format for the Web

Nick Sherman gave a fascinating talk at Ampersand earlier this month which was based on an article he wrote called Variable Fonts for Responsive Design. In both the talk and the essay he suggests that we need a new font format to solve complex responsive design problems: …the glyph shapes in modern fonts are restricted […]


One File, Many Options: Using Variable Fonts on the Web

In 2016, an important development in web typography was jointly announced by representatives from Adobe, Microsoft, Apple, and Google. Version 1.8 of the OpenType font format introduced variable fonts. With so many big names involved, it’s unsurprising that all browsers are on-board and racing ahead with implementation.


Weird things variable fonts can do

I tend to think of variable fonts as a font format in which a single font file is capable of displaying type at near-infinite variations of things like boldness, width, and slantyness. In my experience, that’s a common use case. Just check out many of the interactive demos over at Axis-Praxis:


Three Techniques for Performant Custom Font Usage

There’s a lot of good news in the world of web fonts! The forthcoming version of Microsoft Edge will finally implement unicode-range, the last modern browser to do so. Preload and font-display are landing in Safari and Firefox. Variable fonts are shipping everywhere. Using custom fonts in a performant way is becoming far easier. Let’s […]



This property gives us control over advanced typographic settings such as small caps, ligatures, and swashes. To activate them you must declare which value you need in quotes and then followed by either 1 or on to enable. Alternatively, you can disable them with either 0 or off: Many other values, besides standard ligatures are […]



The font-variant property allows you to change the targeted text to small caps. This property has been extended in CSS3. p:first-line { font-variant: small-caps; /* default is `normal` */ } Before CSS3, this property accepted one of two possible values: normal (how text is rendered by default) and small-caps. A value of small-caps will render […]


Variable Fonts with Jason Pamental