Variable Fonts Primer

FED@IBM – Vince Picone


  • What are variable fonts?
  • What can variable fonts do?
  • Why use variable fonts?
  • Can I use them today?

What are variable fonts?

  • New (2016) addition to the OpenType font specification
  • Font file includes variables – called axis
  • Axis can be altered using css

What can variable fonts do?

  • Weight, width, slant, optical size, italics, and more
  • Modify axis to replicate defined or novel styles
  • Variations interpolated by the browser from a single file

Normal Demo

Variable Demo

Why use variable fonts?

  • Text style responds to view-port, container 🥡
  • Fewer files → fewer requests → performance gainz 📈
  • More expressive and meaningful typographic hierarchy 💅

Can I use variable fonts?

  • You probably are (San Francisco)
  • No IE, but great progressive enhancement story
  • IBM Plex Sans VF is here™️️

CodePen Demo

Designed by Mike Abbink in collaboration with Bold Monday