Conquer Variable Web Typography

Variable fonts will shape the future of web typography as they bring many advantages and new opportunities at a low file size. But with great possibilities comes great responsibility. When do variable fonts make sense? What should you be aware of? And how can you achieve a solid user experience through type? This practical talk will guide you through the first steps with variable web typography.

Transcript

1. Conquer Variable Web Typography Venn by Dalton Maag
2. 86/60 Oliver Schöndorfer glyphe
3. glyphe
4. 14 font files 453 for web fonts only KB
5. 1 font file 56 KB overall size
6. 1. 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
7. What are variable fonts? Voto Serif by Google
8. glyphe Aa Aa Aa Aa Aa X-Bold Bold Medium Regular Light
9. glyphe Aa Aa Aa Aa Aa X-Bold Bold Medium Regular Light
10. glyphe Aa Aa Aa Aa Aa Variable font file
11. glyphe A
12. glyphe A
13. glyphe Aa Aa Aa Aa Aa Interpolation
14. glyphe Aa Aa Aa Aa Aa Named instances X-Bold Bold Medium Regular Light Optional designs in between
15. glyphe Aa Aa Aa Aa Aa weight axis
16. glyphe Aa Aa Aa Aa Aa Aa Aa Aa Aa width axis
17. 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
18. Using variable fonts on the web Output Sans by DJR
19. glyphe Windows 10 MacOS 10.13 iOS 11.2  Ɂ Safari 11 ɂ Chrome 62 ɚ Edge 17 Ƀ Firefox 60 66 % Global support Coming soon
20. glyphe v-fonts.com Discover new variable fonts try them out, see where to get them
21. 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
22. glyphe axis-praxis.org 1. Select font or drop font file 2. See available axes and ranges
23. glyphe wdth wght opsz slnt ital 5 registered axes
24. glyphe Source Serif Variable by Adobe
25. glyphe Source Serif Variable by Adobe font-weight: 327; font-variation-settings: "wght" 327;
26. 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
27. glyphe Venn by Dalton Maag
28. glyphe Venn by Dalton Maag font-stretch: 78%; font-variation-settings: "wdth" 78;
29. glyphe Output Sans by David Jonathan Ross
30. glyphe Output Sans by David Jonathan Ross font-style: oblique 10deg; font-variation-settings: "slnt" 10;
31. glyphe Voto Serif by Google Optical Sizing Axis
32. glyphe 12px 24px 48px 72px Low contrast for small sizes High contrast for large sizes Voto Serif by Google
33. glyphe Voto Serif by Google font-optical-sizing: auto; font-variation-settings: "opsz" 72;
34. glyphe Decovar by FontBureau
35. glyphe Decovar by FontBureau font-variation-settings: "TRMC" 1000, "SKLA" 400, "SKLB" 800, …
36. Golden times Lab DJR by DJR
37. glyphe sz-magazin.sueddeutsche.de
38. 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
39. glyphe sz-magazin.sueddeutsche.de Work Sans Regular Work Sans Medium Work Sans Bold Work Sans SemiBold Work Sans Variabel? ~80 KB 166 KB
40. glyphe
41. glyphe
42. glyphe
43. glyphe Output Sans Hairline by DJR ɂ Chrome h1 { font-size: 20vmax; } h2 { font-size: 11vmax; } h3 { font-size: 5vmax; }
44. glyphe Output Sans Hairline by DJR Ɂ Safari Supports font-optical-sizing: auto by default
45. Hard times Amstelvar by David Berlow
46. glyphe Overchoice Many options make it harder and require much more knowledge
47. 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
48. 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
49. glyphe Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa Single font Font family Aa € 30–60 € 300–700
50. 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 € ?
51. glyphe github.com/LettError/mutatorSans Open Source
52. glyphe black-foundry.com/vesterbro Add on
53. glyphe cjtype.com/dunbar/variablefonts/info.html Retail
54. glyphe blog.typekit.com/variable-font-technology-from-adobe Subscription Model?
55. 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
56. 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
57. Gingham by Christoph Koeberlin Oliver Schöndorfer glyphe 8660.at Slides on speakerdeck.com/glyphe