The recent introduction of Variable Fonts, or OpenType Font Variations, a joint initiative by Adobe, Apple, Google and Microsoft, is an innovative solution to this challenge. With responsive and fluid websites that run on a multitude of different devices, there is now a need for Variable Fonts that can counter the unpredictability of viewing type on the web.

Variable Fonts are new typefaces that are built with the ability to be edited by web designers and developers. Each font has multiple characteristics that can be adjusted, called axes, that the font user can adjust for specific instances. The most common axes of variation are weight, width, optical size, italic, and slant, but there is also the possibility of controlling many other glyph characteristics such as ascender and descender heights, x-heights, and serif shape. Variable Fonts come packaged as one single typeface containing some pre-defined named-instances, plus multiple other axes that the user can combine and alter to create their own type styles. Standard fonts required a different files for each variation within a type family, but Variable Fonts are compressed into one file, saving storage space and increasing page load speeds.

Some common use cases we can expect are:

Responsive Typography for Responsive Sites

• Variable fonts allow a designer or developer to program type style adjustments that respond as a browser window grows and shrinks across devices. By giving text “fluid styles,” there is greater control over how the font’s size, weight, width, letter spacing, and line-height interact with the width of the screen and other design elements.

• Slight adjustments to text styles based on device or screen size can be so subtle that a common user does not even notice, but the overall effect will provide greater legibility and essentially a better user experience.

Adjusting Text Weight to Balance Contrast of Background

• When the same size and weight of text is placed on different backgrounds, it appears slightly different to our eyes. Variable Fonts allows for “optically sizing” type so that no matter what situation it appears in, it does not look like a different type style.

• For example: black text on a white background naturally appears slightly larger/heavier than white text on a dark or textured/image background. Variable Fonts solve this by optically adjusting the text size, weight, or letter spacing so that the two instances look exactly the same.

Creating Specific Glyph Characteristics

• Traditional typefaces are limited to the weights and styles that the type designer determined, which can be frustrating and restrictive. However, Variable Fonts allow users to have full control over all variable axes, allowing them to create type styles based on individual applications. Some possible examples include adding intermediate weights, adjusting x-heights, altering ascender and descender heights, or modifying serif height or weight.

• For example: designers can alter glyph characteristics of an existing font to create a unique logo typesetting along with a corresponding brand specific font. Variable Fonts help to establish a cohesive and consistent brand presence across both web and print applications, with a fraction of the effort.

Current Status and Challenges

Since the introduction of Variable Fonts in September of 2016, progress has been made to get browsers, design programs, and operating systems ready to handle Variable Fonts. It is estimated that Variable Fonts will be a viable option for the web by early 2018. Though Variable Fonts are an exciting advancement for both typography and web design, there are still many hurdles to overcome before it will be the primary form of type on the web.

The community of designers, developers and font experts need to:

• Convert existing type families to Variable Font format, and understand how variable and non-variable fonts will coexist.

• Standardize licensing and pricing systems.

• Standardize language for communicating variable typographic styles between humans (designers and developers) as well as computers (operating systems, browsers, and the CSS standard).

Conclusion

When similar font systems were attempted in the 1990’s, there was not mass adoption. At the time, Variable Fonts were seen as too complicated, and didn’t offer enough benefits to prompt industry-wide adoption. But now, with OpenType Variable Fonts, many experts believe that the technology and user needs have aligned to make a lasting advancement for web typography. John Hudson, one of the type designers working on the project, said in 2016, “This time, we may be cautiously optimistic that the technology will live up to its promise, as a widely supported and interoperable standard that provides benefit to users and opens the door to new forms of typographic expression.”

Variable Fonts will probably be successful this time because there are multiple audiences and use cases that will benefit from the technology. Web designers and developers will be able to customize type and implement it with flexibility and ease. Users will benefit from improved legibility, appearance, and responsiveness across the sites they visit. Type designers will benefit from simplified typefamily options and variations, and a streamlined design-to-web process. If Variable Fonts are implemented to work seamlessly across browsers, design programs, and operating systems, web typography has the opportunity to become more unique, more refined, and better designed.

Here are a few demos for experimenting with Variable Fonts:

Prototypo online font designer (only usable in Chrome)
Examples by Erik van Blokland, font designer: Example #1, Example #2, Example #2

Additional Resources

Introducing OpenType Variable Fonts
OpenType Font Variations Overview
OpenType Variable Fonts: Moving Right Along
What do Variable Fonts mean for Web Developers?
Variable fonts, a new kind of font for flexible design
Get started with variable fonts