Skip to content
FontsNotoIconsKnowledgeFAQ

Variable fonts are here. Now what?

The following guest article was written by Nick Sherman*

Modern variable fonts have become supported in all the major web browsers since the technology was introduced in 2016. In that time, much has been written about what variable fonts are and the nuts and bolts for setting them up on your own website. But what are the practical benefits of variable fonts in real-world design projects? There is no shortage of animations showing new variable fonts fluidly transitioning between stylistic variations of weight, width, etc. But what are the implications of that flexibility for day-to-day design work?

This article outlines some techniques for using variable fonts from a practical typographic perspective. Some of the techniques are explored in more detail with their own in-depth articles. The list isn’t exhaustive, and some of the techniques rely on features that don’t exist in all variable fonts, but hopefully it’s helpful for understanding the benefits of variable fonts for a wide range of typographic techniques.

Compress

Before we even discuss the typographic implications of variable fonts, it’s worth taking a moment to review some of the technological benefits they provide compared to traditional “static” web fonts.

  • Increased efficiency: Perhaps the most significant benefit of variable fonts from a technical perspective is that they offer improved efficiency in many ways, increasing the speed of loading and rendering a web page by reducing requirements for file size, server requests, etc. compared to a comparable collection of static fonts.

  • Simplified file management: While it’s still recommended to implement variable fonts as a progressive enhancement (with static fallback fonts for the small percentage of users on browsers that don’t support the technology), having a wide range of stylistic variation contained in a single font file, with a single @font-face rule, makes it much faster and simpler to experiment with design variations than it would be with static fonts. Want to see how the headlines will look if they’re slightly narrower? You can check quickly by changing a single number, instead of having to set up references for entirely separate font files.

  • Automatic adjustments: Similarly, there are some font variations you might otherwise need to specify explicitly with separate static fonts that can instead be applied automatically with variable fonts, without the need for additional font files, @font-face declarations, or changes to font-variation-settings. For example, the optical size axis can be set to automatically match computed usage sizes, and (in some browsers) other properties like weight can be set to automatically match a user’s system preferences.

  • Variable system fonts as fallbacks: One of the under-appreciated benefits of using variable fonts that were produced according to the official specifications for registered axes is that some platforms provide variable fonts that can work quite well as fallback fonts, allowing for much better results in situations where custom third-party variable fonts aren’t otherwise supported. This is especially helpful when using web fonts in email designs, but can also reduce stylistic jumps caused by the flash of unstyled text.

Finesse

In addition to their technical benefits, variable fonts also provide designers with the power to fine-tune typographic compositions in ways that were previously impractical or impossible. This is especially useful for web design and other dynamic media.

  • Adjusting to tight spaces: In the world of responsive design, block-level elements can stretch and squeeze to better fit their containers. With variable fonts, it’s now much easier to also allow the typefaces to shapeshift according to the available space.

  • Animating interactions: Because variable fonts offer seamless transitions between stylistic variants, they can be used for simple animations to smooth out effects for user interactions, like making a link bolder when someone hovers over it.

  • Compensating for different reading conditions: With the rise of dark mode and user preferences for alternate color schemes, plus sensors for ambient light conditions, typographic compositions can be improved by compensating for differences in how our computers (and our eyes) handle text in different reading environments. Variable fonts offer much more flexibility to fine-tune these adjustments.

Express

While the opportunities for subtle typographic compensations with variable fonts are powerful, more dramatic design techniques allow for even more creative expression.

  • Multiplexed effects: Some variable fonts are produced with “multiplexed” variations which work well for subtle interface cues (e.g. hover effects) but can also be used for more expressive special effects, like overlapping text, or animating glyphs individually.

  • Stylistic gradients and patterns: The flexibility of variable fonts allows for effects where different properties like weight or width can be changed in arbitrary increments across a selection of elements. Words can start with narrow glyphs and end with wide glyphs, or lines can get successively heavier.

  • Variable color fonts: The advent of color font technology has evolved alongside variable font technology, and the techniques can be combined to produce variable color fonts. Fonts that exist at the intersection of both technologies are rare, but—not surprisingly—they can be quite playful and interesting.

  • Unusual designspaces: While most variable fonts are designed within a fairly typical designspace—sticking to the registered axes of variation like weight, width, and optical size—much more is possible with the technology. Adjustable options for things like softness, wonkiness, casualness, or any number of other unusual design variations allow type to behave like it never has before.

  • Reacting to various inputs: Variable fonts can be made to react to obvious factors like those mentioned above. But any input can theoretically be used to affect variable font settings: a user’s mouse position, page scrolling, mobile tilt sensors, physical knobs, audio input, ambient light detectors, pressure sensors, data about time, weather, geolocation, stocks, or pretty much anything—the sky is the limit.

The new possibilities with variable fonts offer improvements for everything from micro to macro typography, with benefits for both design and technical development. Almost any website today has the potential to benefit from using them in one way or another, so give them a try if you haven’t already.

* Content is owned by Google. Thank you to Laurence Penney and Piper Haywood for reviewing this content.

Variable fonts are here. Now what? – Fonts Knowledge - Google Fonts