Variable Fonts

The Future of Web Typography

Kendall Totten

UX Dev Team Lead,

Image credit:

Remember this guy?

What about this fella?

is the use of type to advocate, communicate, celebrate, educate, elaborate, illuminate, and disseminate.
Along the way, the words and pages become art.”

James Felici, The Complete Manual of Typography





Ceci n'est pas une pipe


1997 - 1998

IE 4. Srsly.

Safari & Mozilla

2007 - 2008


Google Fonts,
Adobe Typekit

Variable Fonts.

“a single font file that behaves like multiple fonts”.


ATypI Conference

Warsaw, Poland

September 14, 2016

It takes a village!

The Technology:  
OpenType Font Variations

Actual Fonts:  
Variable Fonts


The Axis of Awesome

The Axis of Awesome




Static Fonts vs. Variable Fonts


Static font

Variable font

Number of weights 3 Virtually infinite
Number of widths 2 Virtually infinite
Number of masters 6 4*
Number of files 6 1
Data @ 120 kB/master** 720 kB 480 kB
Download time @ 500 kB/s 1.44 sec 0.96 sec
Latency @ 100 ms/file 0.6 sec 0.1 sec
Total load time 2.04 sec 1.06 sec

Static Fonts vs. Variable Fonts


The Font Variations ‘fvar’ table describes the axes of variation used in the font:

  • how many axes there are
  • what parameters apply to the variations
  • how these are presented to application software

There is no practical limit on the number of axes of variation that a variable font may include...

One of the reasons we chose to use three-digit numbers was to support intermediate values in the future. And the future is now :)
--Håkon Wium Lie, The inventor of CSS!

.floridian {
  font-family: "Tangerine";
  font-weight: 900;

When do we start?

Variable Fonts are real, but there's still work to do.

Rendering Engines

Browser  & CSS Support

Design software support

Resources / Credits


Variable fonts with notes

By Kendall Totten

Variable fonts with notes

  • 1,335
Loading comments...

More from Kendall Totten