ATypI Tokyo, 5 September, 2019

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

what the web wants with variable fonts

Jason Pamental, web typographer

https://rwt.io | @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] )));

https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/

“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”

https://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/
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
https://codepen.io/jpamental/pen/MGEPEL

“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;
    }
  }
https://css-tricks.com/dark-modes-with-css 

  :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

 

Accessibility

Grade

From ambient light to dark modes to interface animations

 

Persistence

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

Participation

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

Partnership

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

FF Meta Variable

by Monotype

https://www.monotype.com/fonts/variable-fonts

Input Mono Variable

by DJR

https://djr.com (contact for info)

Jost* Variable

by indestrictible type*

https://github.com/indestructible-type/Jost (some assembly required)

Roboto Delta Variable

by Google & Type Network

https://github.com/TypeNetwork/Roboto-Delta (use v2)

Roslindale & Roslindale Italic

by DJR

https://fontofthemonth.club

Gimlet

by DJR

https://fontofthemonth.club

Source Serif Variable

by Adobe

https://github.com/adobe-fonts/source-serif-pro

Univers Next Variable

by Linotype

https://www.myfonts.com/fonts/linotype/univers-next-variable-set

Proxima Nova Variable BETA

by Mark Simonson

https://www.marksimonson.com (tell him I sent ya!)

Amstelvar

by Type Network

https://github.com/TypeNetwork/Amstelvar

Plex Sans Variable

by IBM

https://github.com/IBM/plex/tree/master/IBM-Plex-Sans-Variable

Portada Variable

by TypeTogether

https://www.type-together.com/portada-font

thank you

Jason Pamental

  • https://rwt.io | @jpamental
  • https://rwt.io/newsletter
  • https://noti.st/jpamental/H3pC1o