MANDY MICHAEL @mandy_kerr @mandymichael

JELLO adognamedjello

VARIABLEFONTS.DEV resources, guides & demos for using variable fonts on the web.

I love to TINKER.

ONE FONT THAT ACTS LIKE MULTIPLE FONTS.

WEIGHT AXIS Interpolated weights Named Instance @mandy_kerr

Use VARIABLE fonts now. @mandy_kerr

@font-face { font-family: “Source Sans Variable”; src: url(“ss-variable.woff”) format(“woff-variations”); font-weight: 200 700; }

h1 { font-family: “Source Sans Variable”; font-weight: 658.756; }

h1 { font-family: “My Jello Font”; font-variation-settings: ‘JELO’ 88, ‘FELO’ 203; }

Google Fonts supports VARIABLE fonts. @mandy_kerr

A good font PERFORMANCE strategy is still important for variable fonts.

Variable fonts REDUCE the number of font requests.

In my experience VARIABLE FONTS are on par or better than the standard equivalent.

Source Sans Pro WOFF2 FILE SIZE

Single weight: 111kb Variable font: 112kb

When we are not limited by technical considerations, CREATIVITY can determine our choices.

@mandy_kerr

Because variable fonts can have an INTERPOLATED range of values, we can create fluid variations.

Font: Decovar by David Berlow @mandy_kerr

h1 { } font-family: “Decovar”; font-variation-settings: “INLI” 1000, “SWRM” 0; animation: grow 4s linear infinite; @keyframes grow { 0% { font-variation-settings: “INLI” 1000, “SWRM” 0; } } 50% { font-variation-settings: “INLI” 1000, “SWRM” 1000; } @mandy_kerr

Growing Text Demo

Font: Decovar by David Berlow

Font: Duos Writer by Underware

Font: Gingham by Christoph Koeberlin

Font: Wind VF by Hansje van Halem

Font: Decovar by David Berlow

Marshmallow the Dragon breathes fire to create flaming text

Variable fonts allow WEB TYPOGRAPHY to adapt to screens, environments & devices.

CSS Media Queries will provide access to USER PREFERENCES and environments directly in our CSS.

h1 { } font-family: “Cheee” font-variation-settings: “TEMP” 0; transition: all 4s linear; @media (prefers-color-scheme: dark) { h1 { font-variation-settings: “TEMP” 1000; } }

Dark Mode Slime Text

Font: Cheee by OH No Type Co

CSS is Awesome - Fit to Box

Match FONT WEIGHT to viewport size. “// Font weight axis range 200 to 900 “// Viewport range 320px to 1440px

function fluidAxisVariation() { “// Current viewport width const windowWidth = window.innerWidth “// Get new scales for viewport and font weight const viewportScale = (windowWidth - 320) / (1440 - 320); const fontWeightScale = viewportScale * (200 - 900) + 900; “// Set in CSS using CSS Custom Property p.style.setProperty(“!—weight”, fontWeightScale); }

window.addEventListener(“resize”, fluidAxisVariation);

Font: Chee by OH No Type Co @mandy_kerr

Device Orientation Woops Demo

Device Orientation Individual Letter Weight Change Demo

Font: WHOA by Scribble Tone @mandy_kerr

We can improve the READABILITY and ACCESSIBILITY of our content with a level of control that is unprecedented.

There has never been a better time to CREATE for the web.

Thanks & Resources Variable Fonts for Developers

variablefonts.dev Variable Fonts : v-fonts.com Jason Pamental @jpamental David Berlow @dberlow OH no Type Co @OHnoTypeCo Scribble Tone @scribbletone Typearture @typearture

@mandymichael @mandy_kerr