Variable Fonts Primer

FED@IBM – Vince Picone
Slides: https://fed-vf.now.sh

Topics

• 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 can respond 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™️️

Designed by Mike Abbink in collaboration with Bold Monday

FIN