Rethinking Typography &
 Design Education with
Variable Fonts

An exploration of the possible with Jason Pamental & Greg Lindy

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://variablefonts.io
slant

  .slant.naptime {
    font-style: oblique 12deg;
  }
https://variablefonts.io

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

Changing how we

Think about design

Rethinking hierarchy

Proportion over point size

image of large and small screen display of a web page

Typography’s new

Jobs to be done

Adjusting to

The reader’s needs

Typography has to serve the reader as much as the designer more than ever before

  • More than readable/legible
  • Scalable (as a system)
  • Reactive to user context
    • Light/dark
    • Size of device
  • Responsive to user needs
    • Contrast
    • Size
    • Spacing

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

Improving the

Reading experience

When reading on a digital device, differing user contexts and preferences come to the fore

Expanding our notion of

Editorial design

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

This is still not true

Print is dead

Rumors of my death have been

Greatly exaggerated

—Print

Variable fonts can be just as useful and fun on paper, billboards, and in magazines

  • Copyfitting with a width axis
  • Adjusting for average word length
  • Setting that headline solid with adjustable asc/desc
  • Scaling layout elements with tools like Adobe inDesign’s ‘Liquid Layout’ feature

All that animates

Broadcast & Motion Graphics

Flex and flexibility

Title graphics,
Special effects,
Digital posters

Variable font support in motion design software will enable a whole new dimension of design

  • Smooth scaling of type transitions in lower thirds
  • Adjusting for copy length
  • Credit sequence design
  • Digital signage and posters (DEMO festival)

From wayward stepchild roots

The Web finally
found its voice

And that voice is a chorus

A technical solution to a

Perception problem

The biggest limiter on the web with fonts has been performance/data download requirements, so typographic voice has been very constrained in most cases

A technical solution becomes a

Design voice enabler

Once loaded, they unlock design potential within the browser/content publishing process, reducing or even eliminating the need for custom code

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

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

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

Design Educators Typography Intensive

Thank you

Time to discuss

Slides:
https://noti.st/jpamental/VRqgGe