Skip to content

An Intro to Variable Fonts

variable fonts guide cover
Information

The concept of variable font technology can be traced back to the early 1990s with GX variations and Adobe’s Multiple Master fonts.

This technology, which would allow users to draw the extremes of an axis and interpolate between the two to create new width and weight options, gained traction when Apple, Adobe, Microsoft and Google announced that OpenType Font Variations would be introduced into the OpenType specification in 2016.
The use of variable font technology has grown exponentially since 2016, with an ever-expanding list of axes empowering designers with an increasingly flexible design space. As well as standard axes such as Weight and Width, font makers are able to create custom axes to affect specific design details. 
As well as allowing for additional creative expression and granular control over font styles, there is a significant technological benefit to variable type — reducing file size by containing entire type families in a single file. A variable file contains all the predetermined static instances of a type family (Regular, Medium, Bold, etc.) while allowing type users to access all instances between these points depending on the individual use-case.  
Colophon uses variable type technology extensively, both throughout the design process and as an end deliverable. Nearly all Colophon library fonts contain at least one variable axis — as well as more custom axes such as Detail and Expression.

Default variable axes include: 

Weight

Width

Slant / Italic

Optical Size

The CF-Creator® builds on variable technology, allowing the user to directly modify Colophon Library fonts. Using this tool, designers can create new static instances within each axis or create a variable file clipped to fit certain parameters. The CF-Creator® also allows users to swap OpenType features in a typeface to be on by default, streamlining the design experience.
Read more about the CF Creator here.
Applications suppporting Variable Fonts:

Adobe Illustrator® (v. 22 and later)
Adobe Indesign® (v. 15 and later)
Adobe Photoshop® (v. 19 and later)
Sketch
Figma

Adobe After Effects®
Microsoft Word®
Microsoft Powerpoint®
Pages
Keynote
Browsers supporting Variable Fonts:

Google Chrome (v. 66 and later)
Microsoft Edge (v. 17 and later)
Safari (v. 11 and later [macOS 13])
Firefox (v. 62 and later)
Opera (v. 53)

Internet Explorer
Opera Mini
Guides