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