Very Responsive Typography with Variable Fonts

Slide 1

Slide 2

MANDY MICHAEL @mandy_kerr @mandymichael

Slide 3

JELLO adognamedjello

Slide 4

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

Slide 5

I love to TINKER.

Slide 6

Slide 7

ONE FONT THAT ACTS LIKE MULTIPLE FONTS.

Slide 8

Slide 9

WEIGHT AXIS Interpolated weights Named Instance @mandy_kerr

Slide 10

Slide 11

Slide 12

Use VARIABLE fonts now. @mandy_kerr

Slide 13

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

Slide 14

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

Slide 15

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

Slide 16

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

Slide 17

Google Fonts supports VARIABLE fonts. @mandy_kerr

Slide 18

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

Slide 19

Variable fonts REDUCE the number of font requests.

Slide 20

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

Slide 21

Source Sans Pro WOFF2 FILE SIZE

Single weight: 111kb Variable font: 112kb

Slide 22

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

Slide 23

Slide 24

@mandy_kerr

Slide 25

Slide 26

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

Slide 27

Font: Decovar by David Berlow @mandy_kerr

Slide 28

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

Slide 29

Growing Text Demo

Font: Decovar by David Berlow

Slide 30

Font: Duos Writer by Underware

Slide 31

Font: Gingham by Christoph Koeberlin

Slide 32

Font: Wind VF by Hansje van Halem

Slide 33

Font: Decovar by David Berlow

Slide 34

Marshmallow the Dragon breathes fire to create flaming text

Slide 35

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

Slide 36

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

Slide 37

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

Slide 38

Dark Mode Slime Text

Font: Cheee by OH No Type Co

Slide 39

Slide 40

CSS is Awesome - Fit to Box

Slide 41

Slide 42

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

Slide 43

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

Slide 44

window.addEventListener(“resize”, fluidAxisVariation);

Slide 45

Slide 46

Font: Chee by OH No Type Co @mandy_kerr

Slide 47

Device Orientation Woops Demo

Slide 48

Device Orientation Individual Letter Weight Change Demo

Slide 49

Font: WHOA by Scribble Tone @mandy_kerr

Slide 50

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

Slide 51

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

Slide 52

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