Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Variable Fonts

There is a font specification that can significantly reduce font file sizes called variable fonts. A variable font is a font file that is able to store a continuous range of design variants.

When a designer creates a print project they face some constraints, such as the physical size of the page layout, the number of colors they can use (which is determined by the kind of printing press that will be used), and so on. But they can use as many typeface styles as they like.

This means that the typography of print media is often rich and sophisticated so that the reading experience is truly delightful. Think of the last time you enjoyed browsing an excellent magazine.

Web designers and developers have different constraints than print designers, and an important one is the associated bandwidth costs of our designs. This has been a sticking point for richer typographic experiences, as they come at a cost. With traditional web fonts, each style used in our designs requires users to download a separate font file, which increases latency and page rendering time. Only including the Regular and Bold styles, plus their italic counterparts, can amount to 500 KB or more of font data.

Many font families offer a much wider range of styles, from Thin to Black weights, narrow and wide widths, a variety of stylistic details, and even size-specific designs (optimized for large or small text sizes.) Since you’d have to load a new font file for every style (or combinations of styles), many web developers choose not to use these capabilities, reducing the reading experience of their users.

Anatomy of a variable font

Variable fonts address these challenges, by packing styles into a single file.

This works by starting with a central or ‘default’ style, usually the ‘Regular”, which is an upright roman design with the most typical weight and width that is most suitable for plain text. This is then connected to other styles in a continuous range, called an ‘axis.’

Axis

A variation axis is the expression of a single aspect of a typeface’s design.

The weight axis, for example, defines how light or bold a font looks. With standard fonts, the terms “normal” and “bold” refer to specific files that are called to serve those styles. With variable fonts, weight is conveyed through minimum and maximum numeric values, and designers or developers can choose any value in between.

Not every variable font will have every possible axis (weight will likely be the most popular), but the format, browser implementation, and operating systems guarantee they’ll all work as intended.

Axes are divided into 2 types, registered and custom.

https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/variable-fonts_inline_04.gif

There are currently five registered axes in the Microsoft OpenType specification itself—weight, width, italic, slant, and optical size.

Registration means axis settings are well-defined and commonly used in many different fonts, and their settings can be retained instead of discarded when switching between fonts. Microsoft has defined the following axes so far:

  • Weight, where a value of 100 is thin, 400 is regular, 800 is extra bold
  • Width, where 100 is normal width, 200 is double-width, 50 is half-width
  • Italic, where 0 means roman letters and 1 means italic forms
  • Slant, where the value sets the slant angle in degrees
  • Optical Size, where the value sets a point size that the design can respond to

Variable fonts not only have registered axes like weight, italics, width etc., they can also contain custom axes options like drop shadow, x-height, serif style, stroke contrast, and vertical alignment, which is impossible with non-variable fonts.

Design Program Support

The first major design programs to support variable fonts were Adobe Photoshop, Illustrator, and InDesign. Today several variable fonts are bundled with these programs, so now millions of people using Creative Cloud can experience this new typographic potential. Digital design tool Sketch has also added full support.

For the web, all major browsers now support variable fonts on both desktop and mobile.

Google Fonts now offers a filter to show only variable fonts, and a table for developers listing all the axes and their minimum, default and maximum values.

To summarize, variable font gives designers and developers much greater control over the style of fonts they need while keeping file sizes small and loading speed fast.

Scroll to Top