Variable Fonts

The Future of Web Typography

Kendall Totten

UX Dev Team Lead, redhat.com

Image credit: http://imgur.com/gallery/Fxt8PjW

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

Typography

WEB
FONTS

Georgia

Verdana

Ceci n'est pas une pipe

  @font-face

http://www.happy-pixels.com/2012/03/11/font-face/

1997 - 1998

IE 4. Srsly.

Safari & Mozilla

2007 - 2008

2010+

Google Fonts,
Adobe Typekit

https://pixabay.com

Variable Fonts.

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

- JOHN HUDSON

ATypI Conference

Warsaw, Poland

September 14, 2016

It takes a village!

The Technology:  
OpenType Font Variations

Actual Fonts:  
Variable Fonts

<strong>

The Axis of Awesome

The Axis of Awesome

^3
3^3

SPEED
 FLEXIBILITY

&

Static Fonts vs. Variable Fonts

http://alistapart.com/blog/post/variable-fonts-for-responsive-design

 

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

http://alistapart.com/blog/post/variable-fonts-for-responsive-design

FVAR

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

http://feelgrafix.com/987639-buzz-lightyear.html

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;
}

https://a2ua.com

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

THANK YOU!

Variable fonts

By Kendall Totten

Variable fonts

  • 848

More from Kendall Totten