Slide 1

Slide 1 text

one file, many possibilities using variable fonts on the web

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Slide 4

Slide 4 text

font-stretch: • ultra-condensed • extra-condensed • condensed • semi-condensed • normal • semi-expanded • expanded • extra-expanded • ultra-expanded

Slide 5

Slide 5 text

variable fonts

Slide 6

Slide 6 text

“wght” “wdth” “ital” “slnt” “opsz”

Slide 7

Slide 7 text

p { font-variation-settings: “BEVL” 450; } p { font-optical-sizing: auto; } whatever

Slide 8

Slide 8 text

@font-face { font-family: 'sourcesans'; src: url(SourceSansVariable-Roman.woff2) format('woff2-variations'); font-weight: normal; font-style: normal; } @font-face { font-family: 'sourcesans'; src: url(SourceSansVariable-Italic.woff2) format('woff2-variations'); font-weight: normal; font-style: italic; } font-display: swap; font-display: swap;

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

STABLE STABLE PREVIEW FLAG

Slide 11

Slide 11 text

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

html { font-family: system-ui; }

Slide 15

Slide 15 text

No content