Variable fonts in the real world

Slides of my talk at Drupal Developer Days Lisbon 2018.
https://lisbon2018.drupaldays.org/sessions/variable-fonts-real-world

Transcript

1. LISBON 2018 DRUPAL DEVELOPER DAYS Variable fonts in the real world Tamás HAJAS
2. Diamond Sponsor
3. Platinum Sponsors
4. Gold Sponsors
5. Tamás Hajas Front End Drupal Developer
6. • 20 countries • 46+ offices • 2500+ professionals • 400+ engineers Digital experiences and products
7. LISBON 2018 DRUPAL DEVELOPER DAYS Variable fonts in the real world Tamás HAJAS
8. What are variable fonts ?
9. Ab Ab Ab Ab Ab Ab
10. Ab Ab Ab Ab Ab Ab Static font files
11. Ab Ab Ab Ab Ab Ab Variable font file
12. A
13. A
16. A
17. A
18. https://twitter.com/genramirez/status/1008152208037302272
19. What advantages using variable fonts may provide?
21. Roboto Roboto Mono Roboto Mono Medium Roboto Mono Bold 4 files 520 KB
22. Roboto Roboto Mono Roboto Mono Medium Roboto Mono Bold 4 files 520 KB VS
23. Roboto Roboto Mono Roboto Mono Medium Roboto Mono Bold Noboto Flex 179 KB 1 file 4 files 520 KB VS
24. Advantage 1. Less data to download
25. https://dropbox.design
26. Advantage 2. More responsive text
27. https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/
28. https://www.axis-praxis.org/playground/horse/
29. Advantage 3. It’s animatable
30. https://justanotherfoundry.com/size-specific-adjustments-to-type-designs
31. Advantage 4. Optical size 
 is back
32. Advantage 5. Granular control
33. Advantage 6. More typographic richness
34. https://codepen.io/jpamental/details/OvzpEw
35. https://zeichenschatz.net/demos/vf/variable-web-typo/
36. https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/
37. What are some potential pitfalls to look out for?
38. • Too many options (UX) • More typographic knowledge is needed • Performance gain isn’t always guaranteed • Features and results can be very different • Licensing, price • ???
39. Where to find them ?
40. • v-fonts.com • bit.ly/vfont-sheet • twitter.com/variablefonts • www.axis-praxis.org • wakamaifondue.com
41. How to use variable fonts 
 on the web now?
42. How to use variable fonts 
 on the web now?
43. @font-face { font-family: 'Amstelvar Alpha'; src: url('AmstelvarAlpha.woff2') format('woff2-variations'); }
44. @font-face { font-family: 'Amstelvar Alpha'; src: url('AmstelvarAlpha.woff2') format('woff2-variations'); }
45. But wait!!
46. But wait!! Can I use…?
49. html { font-family: 'Amstelvar Alpha', serif; font-variation-settings: "wght" 400; }
50. html { font-family: 'Amstelvar Alpha', serif; font-variation-settings: "wght" 400; } ??
51. .variable-font { /* Weight axis */ font-variation-settings: "wght" 400; }
52. .variable-font { /* Weight axis */ font-variation-settings: "wght" 783; }
53. .variable-font { /* Width axis */ font-variation-settings: "wdht" 100; }
54. .variable-font { /* Width axis */ font-variation-settings: "wdht" 50; }
55. .variable-font { /* Optical sizing axis */ font-variation-settings: "opsz" 10; }
56. .variable-font { /* Optical sizing axis */ font-variation-settings: "opsz" 72; }
57. .variable-font { /* Italic axis */ font-variation-settings: "ital" 0; }
58. .variable-font { /* Italic axis */ font-variation-settings: "ital" 1; }
59. .variable-font { /* Slant axis */ font-variation-settings: "slnt" 0; }
60. .variable-font { /* Slant axis */ font-variation-settings: "slnt" 8; }
61. registered axis custom axes VS
62. .variable-font { /* Custom axis */ font-variation-settings: "YTLC" 420; }
63. .variable-font { /* Custom axis */ font-variation-settings: "YTLC" 570; }
64. https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/
65. How to use variable fonts 
 on the web when we have CSS4 Fonts Module implemented?
66. font-variation-setting CSS4 high level props "wght" 718; font-weight: 718; "wdht" 100; font-strech: 100; "opsz" 72; font-optical-sizing: auto; "ital" 0; font-style: italic; "slnt" 8; font-style: oblique 8deg; "YTLC" 718; -
67. @font-face { font-family: 'Amstelvar Alpha'; src: url('AmstelvarAlpha.woff2') 
 } format('woff2-variations');
68. @font-face { font-family: 'Amstelvar Alpha'; src: url('AmstelvarAlpha.woff2') 
 } format('woff2' supports variations);
69. How to support Drupal content editors ?
70. • Create themes using variable fonts!
71. • Create themes using variable fonts! • Make predefined styles available in CKEditor
72. • Create themes using variable fonts! • Make predefined styles available in CKEditor • Create Paragraphs with custom font setting options
73. • Create themes using variable fonts! • Make predefined styles available in CKEditor • Create Paragraphs with custom font setting options
74. –Jason Pamental “Words have power and 
 typography is their voice”
75. • Oliver Schöndorfer (blogpost) • Richard Rutter (blogpost 1, blogpost 2) • Roel Nieskens (wakanamifondue.com) Credits
76. Questions? thamas.github.io
77. Thanks for your 
 attention! thamas.github.io