A presentation at webclerks meetup #12 in in Vienna, Austria by Oliver Schöndorfer
Conquer Variable Web Typography Venn by Dalton Maag
86 / 60 Oliver Schöndorfer !
glyphe
14 font files 453 for web fonts only KB
1 font file 56 KB overall size
What are variable fonts? 2. Using variable fonts on the web 3. Golden times 4. Hard times How to get started on variable fonts !
glyphe
What are variable fonts? Voto Serif by Google
!
glyphe Aa Aa Aa Aa Aa X-Bold Bold Medium Regular Light
!
glyphe Aa Aa Aa Aa Aa X-Bold Bold Medium Regular Light
!
glyphe Aa Aa Aa Aa Aa Variable font file
!
glyphe A
!
glyphe A
!
glyphe Aa Aa Aa Aa Aa Interpolation
N a med i n s t a n c e s Op tion al
d esi g ns in bet w ee n X-B o l d B o l d Mediu m R eg u l a r Lig h t
!
glyphe Aa Aa Aa Aa Aa weight axis
!
glyphe Aa Aa Aa Aa Aa Aa Aa Aa Aa width axis
!
glyphe Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa weight axis width axis
Using variable fonts on the web Output Sans by DJR
!
glyphe " Windows 10 MacOS 10.13 iOS 11.2 $ Safari 11 % Chrome 62 & Edge 17 ' Firefox 60 66
% Global support Coming soon
!
glyphe v-fonts.com Discover new variable fonts try them out, see where to get them
!
glyphe @font-face { font-family: 'Venn'; src: url('Venn.woff2') format(' woff2-variations '), url('Venn.woff2') format(' woff2 '); } Will become the standard Fallback for the others
!
glyphe
axis-praxis.org
1.
Select font or
drop font file
2.
See available
axes and ranges
!
glyphe wdth wght opsz slnt ital 5 registered axes
!
glyphe Source Serif Variable by Adobe
!
glyphe Source Serif Variable by Adobe font-weight: 327 ; font-variation-settings: "wght" 327 ;
!
glyphe font-weight: 327 ; font-variation-settings: "wght" 327 ; High-level property will become standard with CSS 4 Font Module Low-level property supported by all participating browsers now
!
glyphe Venn by Dalton Maag
!
glyphe Venn by Dalton Maag font-stretch: 78% ; font-variation-settings: "wdth" 78 ;
!
glyphe Output Sans by David Jonathan Ross
!
glyphe Output Sans by David Jonathan Ross font-style: oblique 10deg ; font-variation-settings: "slnt" 10 ;
!
glyphe Voto Serif by Google Optical Sizing Axis
!
glyphe 12px 24px 48px 72px Low contrast for small sizes High contrast for large sizes Voto Serif by Google
!
glyphe Voto Serif by Google font-optical-sizing: auto; font-variation-settings: "opsz" 72 ;
!
glyphe Decovar by FontBureau
!
glyphe Decovar by FontBureau font-variation-settings: "TRMC" 1000 ,
"SKLA" 400 ,
"SKLB" 800 , …
Golden times Lab DJR by DJR
!
glyphe sz-magazin.sueddeutsche.de
!
glyphe sz-magazin.sueddeutsche.de Work Sans Regular Work Sans Medium Work Sans Bold Work Sans SemiBold 36
KB 52
KB 39
KB 39
KB 166 KB PT Serif Regular PT Serif Bold PT Serif Italic 24
KB 23
KB 23
KB
!
glyphe sz-magazin.sueddeutsche.de Work Sans Regular Work Sans Medium Work Sans Bold Work Sans SemiBold Work Sans
Variabel? ~80 KB 166 KB
!
glyphe
!
glyphe
!
glyphe
!
glyphe Output Sans Hairline by DJR % Chrome h1 { font-size: 20vmax; } h2 { font-size: 11vmax; } h3 { font-size: 5vmax; }
!
glyphe Output Sans Hairline by DJR $ Safari Supports font-optical-sizing: auto by default
Hard times Amstelvar by David Berlow
!
glyphe Overchoice Many options make it harder and require much more knowledge
!
glyphe Static Fonts Variable Font 110 KB 90 KB Aa Roman 110 KB Aa Regular 30 KB Italic 30 KB Aa Bold 30 KB Aa
!
glyphe 220 KB Aa Regular 30 KB Italic 30 KB Aa Bold 30 KB Aa 90 KB Aa Roman 110 KB Aa Italic 110 KB Static Fonts Variable Font
!
glyphe Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Single font Font family Aa € 30–60 € 300–700
!
glyphe Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Single font Font family Aa € 30–60 € 300–700 Variable font Aa Roman 110 KB € ?
!
glyphe github.com/LettError/mutatorSans Open Source
!
glyphe black-foundry.com/vesterbro Add on
!
glyphe cjtype.com/dunbar/variablefonts/info.html Retail
!
glyphe blog.typekit.com/variable-font-technology-from-adobe Subscription Model?
!
glyphe • One font file with many possible styles • Fine graded influence for better typography – when you know what you’re doing • Improvements by default with optical-sizing • Performance gain under certain conditions Summing up
!
glyphe • For new releases
v-fonts.com and twitter.com/variablefonts
• Testing variable fonts
axis-praxis.org
• List of available variable Fonts by Indra Kupferschmid • Various talks about variable fonts
by TYPO Labs 2018
• Getting started with variable fonts by Richard Rutter • How to use variable fonts in the real world by Richard Rutter Resources
Gingham by Christoph Koeberlin Oliver Schöndorfer
! glyphe 8660.at Slides on speakerdeck.com/glyphe
Variable fonts will shape the future of web typography. They can bring great variety and new opportunities at a low file size. But with many possibilities you can also choose wrong. This practical talk guides you through the first steps with variable web typography, accompanied by several use cases and examples. What are variable fonts, what can you do with them, when do they make sense, and what should you be aware of? Be ready for the next technology shift in your browser.
The following resources were mentioned during the presentation or are useful additional information.
Rough transscript of the talk as a blog post
Here’s what was said about this presentation on social media.
for free. You
can too.