Conquer Variable Web Typography

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