Web Unleashed Toronto, 13 September, 2019

Dynamic Typographic Systems:
Modern CSS & 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

First, foundations

New techniques in CSS

The Odyssey, Book I

Tell me, O muse, of that ingenious hero who travelled far and wide after he had sacked the famous town of Troy. Many cities did he visit, and many were the nations with whose manners and customs he was acquainted; moreover he suffered much by sea while trying to save his own life and bring his men safely home; but do what he might he could not save his men, for they perished through their own sheer folly in eating the cattle of the Sun-god Hyperion; so the god prevented them from ever reaching home. Tell me, too, about all these things, O daughter of Jove, from whatsoever source you may know them. 


  .this-heading {
    --heading-color: #212171;
  }



  .this-heading.changed {
    --heading-color: #914141;
  }



  .this-heading {
    --heading-size: 5;
    font-size: calc( var(--heading-size) * 1vw );
  }



  .this-heading {
    --heading-size: 5;
    font-size: calc( var(--heading-size) * 1vw );
  }
  .this-heading.changed {
    --heading-size: 6;
  }



  .this-heading {
    --heading-weight: 700;
    --heading-width: 100;
    font-weight: var(--heading-weight);
    font-stretch: calc( var(--heading-width) * 1% );
  }



  .this-heading.thinner {
    --heading-weight: 150;
    --heading-width: 80;
  }

The Odyssey, Book I

Tell me, O muse, of that ingenious hero who travelled far and wide after he had sacked the famous town of Troy. Many cities did he visit, and many were the nations with whose manners and customs he was acquainted; moreover he suffered much by sea while trying to save his own life and bring his men safely home; but do what he might he could not save his men, for they perished through their own sheer folly in eating the cattle of the Sun-god Hyperion; so the god prevented them from ever reaching home. Tell me, too, about all these things, O daughter of Jove, from whatsoever source you may know them.

A little bit

Tell me, O muse, of that ingenious hero who travelled far and wide after he had sacked the famous town of Troy.

Can go farther

Many cities did he visit, and many were the nations with whose manners and customs he was acquainted

Than one expects

Moreover he suffered much by sea while trying to save his own life and bring his men safely home


  .small-card {
    --h3-size: 3;
    --p-size: 1.6;
  }



  .sidebar .small-card {
    --h3-size: 2.5;
    --p-size: 1.5;
  }

You might be asking

What was that strange magic in Slide 24?

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

Friction reduction

improving the reading experience

https://okaytype.com/typefaces/okay

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/
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;
  }



.teaser {
  grid-column: auto / span 1;
  --p-lh-min: 1.1;
  --p-lh-mid: 1.2;
  --p-lh-max: 1.3;
}
@media (min-width: 67em) {
  .teaser {
    --p-size-min: 0.875;
    --p-size-mid: 0.875;
    --p-size-max: 1;
  }
}



:root {
  /* font stack */
  --font-stack: "Roboto Delta", sans-serif;
  --font-stack-serif: "Gimlet VF", serif;
}
.theme-alt {
  font-family: var(--font-stack-serif);  
}
.theme-alt p {
  --text-wght: 400;
}
@media screen and (min-width: 25em) {
  .theme-alt p {
    --text-wght: 375;
}
@media screen and (min-width: 45em) {
  .theme-alt p {
    --text-wght: 350;
  }
}
@media screen and (min-width: 55em) {
  .theme-alt p {
    --text-wght: 330;
  }
}

Transfer friction: intentional tension

sometimes typography needs to be challenging

IBM Plex Sans Variable
transform
16 files
960kb
into
2 files
233kb
!
https://github.com/IBM/plex/tree/master/IBM-Plex-Sans-Variable
Avenir Next
FF Meta
Neue Frutiger
Univers Next
https://www.myfonts.com/search/%22Variable+set%22/
https://recursive.design
https://tinyurl.com/css2-announce
https://faux-foundry.com
https://faux-foundry.com
https://fonts.gstatic.com/experimental/incxfer_demo
https://fonts.gstatic.com/experimental/incxfer_demo
https://fonts.gstatic.com/experimental/incxfer_demo

What the web wants

from you (and your code)

Versatility & Compatibility

Weight, Width Axes

font-weight: [num]
font-stretch: [num]%

Details & Scale

Optical Size

Match to font-size (px value)
font-variation-settings: 'opsz' [num];

Accessibility

Grade

Use for contrast and UI animation
font-variation-settings: 'GRAD' [num];

Persistence

Learn the right way, and make it reliable & repeatable

Participation

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

Partnership

Clients are interested when they learn. Type designers just need to know

FF Meta

by Monotype

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

Input Mono

by DJR

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

Jost*

by indestrictible type*

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

Okay

by Okay Type

https://okaytype.com/typefaces/okay

Recursive

by ArrowType & Google Fonts

https://recursive.design

Roboto Delta

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

by Adobe

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

Univers Next

by Linotype

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

Proxima Nova BETA

by Mark Simonson

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

Amstelvar

by Type Network

https://github.com/TypeNetwork/Amstelvar

Plex Sans

by IBM

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

Portada

by TypeTogether

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

Hepta Slab & Crimson Pro

by Google Fonts

https://tinyurl.com/css2-announce

thank you

Jason Pamental

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