Variable Fonts

A talk by Scott Kellum

Benton Modern’s optical sizes

• Optical sizes
• Weight
• Width
• Grade

A Noordzij cube of the Freight family

Superpolator

body {
  font-weight: 400;
}

cool, but why use them?

Implementation

@font-face {
  font-family: 'Tablet Gothic';
  src: url('/TabletGothicGX.woff2') format('woff2');
}

body {
  font-family: 'Tablet Gothic';
  font-weight: 600;
  font-variation-settings: 'wght' 600, 'wdth' 2;
}

Sharp Grotesk for Dropbox (259 fonts)

Andrew Johnson on Instagram

Typetura.js

h1 {
  --variation-wght:
    2 ~ 500,
    .2 ~ 1000
  ;
  --variation-wdth:
    1.2 ~ 500,
    .8 ~ 1000
  ;
}

• Identify custom properties
• Create object to store settings
• Add CSS variables to the context
• Link regular CSS properties to the variables
• On resize, only the variables change

CSS Houdini

registerPaint('typetura', class {
  static get inputProperties() {
    return [
      '--font-variation-settings'
    ];
  }
}

Madita Animography by Philip von Borries

Variable fonts are new

Variable font resources

• Axis-Praxis
• Variable font introduction
• Typetura.js
• Microsoft’s variable font demo