Variable fonts are becoming increasingly viable for use in your web projects. Here’s what variable fonts are, and how using them can benefit the user experience.
Variable fonts vs. the usual way we deal with fonts
When you pick a named font to use on your website, for example “Arial”, “Helvetica Neue”, or “Open Sans”, you’re actually picking a font family (a.k.a. “typeface”).
You might use just a handful of fonts in that font family on your site, e.g. Arial Regular, Arial Regular Italic, Arial Bold, and Arial Bold Italic. Typically, each of these fonts is defined in a separate font file.
So, even though Open Sans Semi-Bold is rather similar to Open Sans Bold, each is represented by an independent font file of roughly equal file size that would have to be downloaded to your site-visitor’s browser. And the file sizes of all those font files can add up.
Variable fonts allow more of a font family to be defined in a single font file. Within a variable font file, font designers develop “master” font style variations, as well as the math-based rules under the hood that allow users of their font to morph between those variations by modifying simple numeric values. The result is a font file that can produce a lot of variation in relatively little file space.
The user-controllable style variations don’t end at thickness and slanty-ness, though. Variable fonts allow font designers to get creative and provide font consumers many more dials to play with.
Some benefits of using variable fonts
Here are some of the benefits of variable fonts.
Faster-loading pages
Less font data to download means faster page-load times.
This will likely be the single biggest benefit of variable fonts on the web, at least initially.
Let’s say you’re visiting a web page that uses six font styles, but requires just two variable font files. Those two font files are smaller in total size than the six you would have had to load otherwise, so that’s fewer server requests and less data to download for that page to display properly.
Thus, your web pages load faster. And faster-loading pages make for better user experiences than slower-loading pages.
Fewer compromises for designers
Another consequence of having overall smaller font file sizes: designers who are file-size conscious—or who are reined in by managers and technical leads who are—do not need to make as many compromises to their design.
The more that variable fonts proliferate, the fewer conversations you’ll need to have that begin: “Do we really need the Light Italic version of this font? It costs us an additional 100kb.”
Finer tuning
Variable fonts allow users of the font to adjust its supported parameters in relatively small increments, allowing for fine-tuning where desired.
Take the common example of font weight. With traditional fonts, font weight values range from 100 to 900, but are limited to nearest-hundred (and that’s presuming that each hundred is available as a separate font file).
Variable fonts, however can allow the font weight to be meaningfully adjusted to any number in the supported range. Want to split the difference between Semi-Bold (traditionally 600) and Bold (700)? Set the font-weight to 650, and that’s what you’ll get. Without a variable font, you’d be forced to choose between one or the other.
Far more options for font designers and font users
Axes of variation
Variable fonts let typeface designers design fonts that users can modify in a variety of ways. Each kind of style variation that a font supports is an referred to as an axis. Font weight is one example of an axis of variation in a typical variable font.
For each axis of variation, the font user can modify the style value within a predefined range. For example, one font might allow users to set the font weight to any value between 300 and 800; another font might allow a range of 1–999.
Tons of style combinations
A single variable font can support a large number of axes (if the font designer so chooses), and a font user can adjust any or all of the supported axes’ values.
As a result, the number of possible style combinations can get enormous fast.
For example, if a variable font supports weight in the range of 200–900, and width in the range of 50% to 150%, that’s 70,000 style combinations right there (and that’s presuming whole-number values only). If it supports a third axis with a range of 500, you’re already at 35 million combinations!
Please don’t make me do any more math.
Creative variations
These axes of variation can allow UI designers to modify normal stuff, like a font’s weight or width or italics-ness. But a font designer can also create custom axes for more creative modifications.
This might be as dry as decreasing the size of capital letters, as specific as increasing the number of thorns on a rose-themed font, or as wacky as changing the size of the hat that appears on the head of each emoji in an emoji-icon font.
Practical axes
Benefits of custom axes of variation don’t just cover aesthetics, they can be practical as well.
For example, some variable fonts have a “grade” axis that allows you to change the weight of the text without affecting the width of the text. This would be useful in a UI design where, for example, text labels are bolded when the item is selected, but it’s important to your design that UI elements don’t change size.
Text animations and transitions
Because an axis values can be modified incrementally, variable fonts allow for smooth CSS transitions between text states.
This page contains some interactive examples of text transitions triggered on mouse hover (as well as some examples of creative axes of variation): https://pixelambacht.nl/2017/variable-hover-effects/
In addition, variable fonts will provide more opportunities for interesting text and icon animation effects, based on font designers’ creative axes of variation.
More-responsive responsive design
Variable fonts provide tools for enhancing responsive design.
Some of this ties the concept of fine-tuning with responsive techniques. An example of this would be setting the font weight of a headline to always be a function of the current screen size, to preserve balance in your visual design.
You can also take readability into account, based on the size of the screen and the size of the text. With decorative fonts, you may wish to tone down the decorative styling of a heading when the text gets too small for the flourishes to be effective. Along the same lines, if a variable font supports the optical size axis, then you can give your users the best experience by tuning the font for optimal legibility based on the current size range of the text.
Learn about how BetaTesting can help your company launch better products with our beta testing platform and huge community of global testers.
BetaTesting Blog 