Better Typographic &
 Editorial Design with
Variable Fonts

An exploration of possibilities with Jason Pamental

A variable font is a single font file that behaves like multiple fonts

—John Hudson

a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
width
width
weight
weight
x-height
x-height

  .width.super-floof {
    font-stretch: 140%;
  }
  .width.petite-puffle {
    font-stretch: 50%;
  }


  .weight.chonky-boi {
    font-weight: 900;
  }
  .weight.skinny-minnie {
    font-weight: 500;
  }


  .x-height.bubba-bear {
    font-variation-settings: 'YTLC' 600;
  }
  .x-height.lil-bit {
    font-variation-settings: 'YTLC' 450;
  }
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
slant

  .slant.naptime {
    font-style: oblique 12deg;
  }
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

Axis

Italic

Elegant 

 .example {
   font-style: italic;
   - or -
   font-variation-settings: 'ital' 1;
 }

Axis

Optical Size

Details 

 .example {
   font-optical-sizing: auto;
   - or -
   font-variation-settings: 'opsz' 72;
 }

Axis

Optical Size

Chapter 1: Loomings

Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball.

Axis

Optical Size

An optical size axis can enable a single font to look quite different and be appropriate for use and a much broader range of size and purpose

Progressive Enhancement

Supporting Older Browsers

Fancy Fonts 

 .example {
   font-family: "Literata Static";
 }
 @supports (font-variation-settings: normal) {
   .example {
     font-family: "Literata Variable";
   }
 }

Progressive Enhancement

Supporting Older Browsers

It’s often relatively straightforward to layer in support for variable fonts in existing projects

Better typography

Expanding your voice

Variable fonts open the door to better, more interesting design on the web

Accessibility

Light/Dark Mode

Yin / Yang 

 .example {
   font-family: "Literata Variable";
   font-variation-settings: "GRAD" 0;
 }
 @media (prefers-color-scheme:dark) {
   .example {
     font-family: "Literata Variable";
     font-variation-settings: "GRAD" -0.5;
   }
 }
}

Accessibility

Light/Dark Mode

Enabling different light modes is fairly well-supported, but often needs more than just color contrast inversion. Grade, weight, and letter-spacing can all play a part in fine-tuning the typographic experience

Sourcing

Variable Fonts

More and more variable fonts are becoming available every day. Many of the most interesting ones are from smaller foundries and individual designers, but the bigger companies are getting into it now as well

Inspecting

Variable Fonts

Once you have a variable font (or are reviewing one), it helps to have a tool or two to help understand that font’s capabilities.

Self-hosting

Variable Fonts

Most sources of variable fonts are direct from vendors, so it’s worth getting to know how to set up your own @font-face rules


 @font-face {
   font-family: 'Plex Sans VF';
     src: url("path/to/IBMPlexSansVar-Roman.woff2") 
     format("woff2-variations");
   font-display: swap;
   font-stretch: 85% 100%;
   font-style: normal;
   font-weight: 100 700;
 }

Using the

Google Fonts API

Google launched support for variable fonts through their API, with a catalog that is growing regularly

 



 @import url("https://fonts.googleapis.com/css2?
   family=EB+Garamond:ital,wght@
   0,400..800;1,400..800");
 }
 @import url("https://fonts.googleapis.com/css2?
   family=Inter:slnt,wght@
   -10,400..800;0,400..800");
 }

Making the case

Performance

While a variable font file is larger than a single static weight, they are often smaller than the 4 or 5 typically loaded

Making the case

Getting everyone on board

Variable fonts bring many benefits to the table. The key to executive and team buy-in depends on who’s on the other side of the table. Know their pain points!

  • Branding
  • Performance
  • Design
  • Accessibility