An Event Apart: “Variable Fonts and the Future of Typography”

Jason Pamental speaking at An Event Apart Seattle 2018 on April 4, 2018.

For centuries, typography has shaped the way we ‘hear’ what we read. In our web work, though, we’ve have to balance our typographic desires with user experience and performance, knowing that every weight, width, or style of a typeface required a different file download. Variable fonts change that, as they include every width, weight, slant, and other permutation of a typeface, all in a single file not much bigger than a regular font file. Now, beautiful web typography can be crafted to respond to screen size, language setting, even ambient light. In a detail-packed hour, Jason will show you not just how far the new capabilities can take us, but how to make use of them right away.

Notes

  • “Type well used is invisible as type” — Beatrice Warde, The Crystal Goblet (1932)
  • Type is never neutral
  • Type is how we “hear” what we read
  • When we make a design system to fit all content, it is optimized for none of it
  • Variable fonts — Many fonts crammed into one
    • Weight
      • font-weight: 88;
      • font-variation-settings: 'wght' 88;
    • Width
      • font-stretch: 265;
      • font-variation-settings: 'wdth' 265;
    • Slant
      • font-variation-settings: 'slnt' 1000;
    • Italic
      • font-style: italic;
      • font-variation-settings: 'ital' 1;
    • Optical size
      • font-variation-settings: 'opsz' 12;
    • Grade
      • font-variation-settings: 'GRAD' 88;
    • Ascenders and descenders
      • font-variation-settings:'YTAS' 750,'YTDE' 250;
    • Mayhem
      • font-variation-settings: 'BLDA' 0, 'TRMD' 0, 'TRMC' 07,50',S'KLSDKL'D0',0, 'TRML' 025,0,'SK'LSKAL'A'0,1'00T0R,MF'T0RM,F'TR2M50K,' 0'T,RM'BK'LDB25'0,0,''BLWMDBX'2'10900, 'WTMRMX2B' 705,0,'T'RTMAR'MB0',5'00SK,L'B'TRM0,A''5TR0M0,G''0S,KLB'T'RM10E0'00,;'TRMG' 750, 'TRME' 500;
  • All modifications are one intended by the font designer, they are not distortions by the browser
  • Example code 
    • @font-face {
  font-family: 'Amstelvar';
  src: url('amstelvar.ttf') format('truetype-variations');
}

    • .myvariablefontclass {
  font-weight: 563; /* 1-999 */
  font-stretch: 491; /* 1-999 */
  font-style: italic; /* binary */
  font-optical-sizing: auto; /* matches font-size */
}
.myvariablefontclass {
  font-variation-settings: 'wght' 563, 'wdth' 491, 'ital' 1, 'opsz' 16;
}

    • .myvariablefontclass {
  font-variation-settings:
    'wght' 563,
    'wdth' 491,
    'ital' 1,
    'opsz' 16,
    ‘GRAD' 88,
    'YTAS' 680,
    'YTDE' 190;
}
    • Custom axes must be uppercase
  • Typography for reading
  • Optical sizing: one shape is not for all sizes
  • Editorial design and art direction
    • “When you decontextualize the news […] you eliminate or impede the ability for those
      verifications to be there” — David Sleight, Design Director at ProPublica
  • Type on screen is intrinsically of the web
  • Good typography is intentional. Great typography is meaning. Say something.

Speaker Links and Resources

Related Links