ATypI Tokyo, 5 September, 2019

Our New Typography:
dynamic typesetting, variable fonts & a million digital devices

what the web wants with variable fonts | @jpamental
Itinerant typographer,
Walker of collies

Type is the voice of our words

It’s how we ‘hear’ what we read

“There are no crystal goblets, no defaults devoid of friction. Design has visible surfaces, inevitably, and they brim with significance and context and connotation and intent and tone”

—Nina Stössinger

Friction reduction

improving the reading experience

calc( [size-min]em + ( [size-max] - [size-min] ) * ((100vw - [start]em ) / ( [stop] - [start] )));

“Please scale from 2.25em on small screens up to 5em on largest ones, starting at viewport width of 25em and stopping at 75em or larger”


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

  .slant.naptime {
    font-style: oblique 12deg;

“The role of the typographer has changed. We no longer decide; we make suggestions”

—Tim Brown

  :root {
    /* default light mode colors */
    --color-bg: #f9f9fd;
    --color-text: #414141;
    /* initial variable font values */
    --text-GRAD: -0.1;

  @media (prefers-color-scheme: dark) {
    --color-text: #f9f9fd;
    --color-bg: #414141;
    p {
      --text-GRAD: 0.25;
      letter-spacing: 0.015em;

  :root {
    /* default light mode colors */
    --color-bg: #f9f9fd;
    --color-text: #414141;
    /* initial variable font values */
    --text-GRAD: -0.1;

  .contrast {
    /* higher contrast colors */
    --color-bg: #fafafe;
    --color-text: #212121;
  .contrast p {
    --text-GRAD: 0.75;
    letter-spacing: 0.005em;

  .bigtext {
    --p-size-min: 1.25;
    --p-size-mid: 1.375;
    --p-size-max: 1.5;

  .spacing {
    --p-lh-min: 2.2;
    --p-lh-mid: 2.4;
    --p-lh-max: 2.6;
  .spacing p {
    word-spacing: 0.75em;

Transfer friction: intentional tension

sometimes typography needs to be challenging

What the web wants

from variable fonts

Versatility & Compatibility

Weight, Width Axes

Per OT spec, Regular wt. should be 400

Per CSS spec, widths expressed as a %

Details & Scale

Optical Size

The details at larger scales really sing




From ambient light to dark modes to interface animations



There is much to do, but much can already be done


Everyone needs to contribute; it can't rely upon the efforts of a few


Clients are interested—as soon as they know about it. Let us web folk help

FF Meta Variable

by Monotype

Input Mono Variable

by DJR

Jost* Variable

by indestrictible type*

Roboto Delta Variable

by Google & Type Network

Roslindale & Roslindale Italic

by DJR


by DJR

Source Serif Variable

by Adobe

Univers Next Variable

by Linotype

Proxima Nova Variable BETA

by Mark Simonson


by Type Network

Plex Sans Variable

by IBM

Portada Variable

by TypeTogether

thank you

Jason Pamental

  • | @jpamental