Designers, imagine a world in which the number of fonts used on a website or app isn’t limited by load speed, or by the availability of styles in a font family.
You’d no longer be limited to a few weights (light, regular, bold) and widths (condensed, regular, expanded). Instead, you could exercise a fine degree of control over all of these properties.
In the case of weight, you could select any integer from 1 to 999. For width, you could select any percentage between 0 and 100%. Even better, you could combine these two properties (e.g., “bold expanded”), giving you 99,900 (100×999) possible combinations! All from a single font file.
To many designers, this is true design freedom. To design legend Massimo Vignelli — who firmly believed in using no more than two typefaces in a design — this is chaos.
Whatever your opinion, in a digital era replete with myriad screen sizes and users commonly reading text on the go, this is where the future of typography is heading: variable fonts.
What Are Variable Fonts?
Type designer John Hudson defines variable fonts as “a single font file that behaves like multiple fonts.” Jointly developed by Apple, Google, Microsoft, and Adobe, this new font format allows for great flexibility while remaining extremely light.
With variable fonts, there can be continuous variation along a given design axis. Picture a design axis slider for weight that runs from 1 and 99, where 1 is light and 99 is black. Font weight is no longer limited to a drop-down containing a few options (e.g., light, regular, bold). A designer can now choose from 99 different weights. This is possible because the variable font file contains glyph information on how the glyph points should change so that all variations between 1 and 99 can be generated.
Throughout this blog, we’ll use weight as our main example of a design axis. Other axes include position of glyph outline points, x-height, ascender and descender values, serif pronunciation, kern, slant, italics, and baseline. Font designers can also create custom axes. With variable fonts, the possibilities really are limitless.
Variable fonts are currently supported by Safari, Chrome, Edge, and Firefox. Adobe design software also supports variable fonts. (Check out some functioning examples of variable fonts.)
Variation Tables: How Variable Fonts Work
Behind the scenes, the data about the font and how its axes should vary lives in variation tables. These variation tables specify the design variation supported by the font and describe how design axes behave. Additionally, they define the range of variation of the different axes.
If font designers want to create their fonts to only have bold variations, they would do so by establishing a limited weight range in the variation table. In other words, instead of allowing the font to vary from anywhere between 1 and 99, they can limit it to a range that begins at 80 and ends at 99.
Variable fonts have default settings and can also include “deltas” where necessary. Deltas solve for the extreme variations of a design axis when the axis needs to behave differently than the established default. For example, in the extreme cases of ultra light and extra black weights, the glyph points may need adjustment in position to avoid distortion.
This is what makes variable fonts different from simply adding a stroke to a font to make it appear bolder — and anyway, all designers know this is typographic sacrilege. By indicating different behavior where needed, the variable font ensures the variation doesn’t impact the true shape of a glyph.
Variation Table Examples
Different design aspects have different variation tables, not all of which are required for a given font to function. Example of tables include the following:
- Baseline table (BASE) — Provides information used to align glyphs of different scripts and sizes in a line of text.
- Glyph table (gvar) — Provides all of the variation data that describe how glyph outlines change across the font’s variation space.
- Control value table (CVT) — Provides an indexed list of control values such as the height of a serif, x-height, or the width of uppercase stems.
Additionally, font designers can create named instances for specific variation combinations. Named instances can be created for the most commonly used styles (e.g., “light condensed,” “extra bold extended,” and so on). These would appear as main options to someone using the variable font in their design.
To learn more about variation tables, as well as access more detailed information on how variable fonts work, check out this guide.
What Do Variable Fonts Mean for Design?
Variable fonts present a solution to the need to constrain font use on digital platforms due to load speed. In the past, each member of a font family was a separate file. A large collection of individual font files adds bandwidth and network requests. With variable fonts, an entire font family can be encapsulated within a single file.
As a result, designers no longer need to make design choices based on load speed. Instead, they can focus on readability and hierarchy to select the exact font that works best for a design.
What’s even more exciting? The real possibility of truly responsive typography. Today, responsive design and development are standard practice. That’s why it’s imperative that typography — one of the primary elements of design — responds, too.
Screen size is extremely important when designers create layouts. With so many different screen sizes to consider, it’s no longer enough to simply reduce font size to accommodate smaller screens. With variable fonts, designers can choose as many font styles as there are screen sizes without worrying about load speed. In the future, fonts could respond dynamically to users’ devices, and even to the distance at which users are holding their devices.
Final Thoughts
Variable fonts open up new possibilities for designers. They’re a well-timed typographical evolution that gives us greater freedom and control while enabling quicker load times and easier file management. While Massimo Vignelli may well be turning in his grave, I like to think that — at least eventually — he, too, would come to see that variable fonts are a worthy solution for the digital age.
Want to learn more about how Distillery’s top-notch UI and UX designers create solutions that build stronger products? Let us know!