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
   

   View Slide

2. Diamond Sponsor
   

   View Slide

3. Platinum Sponsors
   

   View Slide

4. Gold Sponsors
   

   View Slide

5. Tamás Hajas
   Front End
   Drupal Developer
   

   View Slide

6. • 20 countries
   • 46+ offices
   • 2500+ professionals
   • 400+ engineers
   Digital experiences and products
   

   View Slide

7. LISBON 2018
   DRUPAL DEVELOPER DAYS
   Variable fonts
   in the real world
   Tamás
   HAJAS
   

   View Slide

8. What are
   variable fonts
   ?
   

   View Slide

9. Ab Ab Ab Ab Ab Ab
   

   View Slide

10. Ab Ab Ab Ab Ab Ab
    Static font files
    

    View Slide

11. Ab Ab Ab Ab Ab Ab
    Variable font file
    

    View Slide

12. A
    

    View Slide

13. A
    

    View Slide

14. View Slide

15. View Slide

16. A
    

    View Slide

17. A
    

    View Slide

18. https://twitter.com/genramirez/status/1008152208037302272
    

    View Slide

19. What
    advantages
    using variable fonts may provide?
    

    View Slide

20. View Slide

21. Roboto
    Roboto Mono
    Roboto Mono Medium
    Roboto Mono Bold
    4
    files
    520
    KB
    

    View Slide

22. Roboto
    Roboto Mono
    Roboto Mono Medium
    Roboto Mono Bold
    4
    files
    520
    KB
    VS
    

    View Slide

23. Roboto
    Roboto Mono
    Roboto Mono Medium
    Roboto Mono Bold
    Noboto Flex
    179
    KB
    1
    file
    4
    files
    520
    KB
    VS
    

    View Slide

24. Advantage 1.
    Less data to
    download
    

    View Slide

25. https://dropbox.design
    

    View Slide

26. Advantage 2.
    More responsive
    text
    

    View Slide

27. https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/
    

    View Slide

28. https://www.axis-praxis.org/playground/horse/
    

    View Slide

29. Advantage 3.
    It’s animatable
    

    View Slide

30. https://justanotherfoundry.com/size-specific-adjustments-to-type-designs
    

    View Slide

31. Advantage 4.
    Optical size 

    is back
    

    View Slide

32. Advantage 5.
    Granular control
    

    View Slide

33. Advantage 6.
    More typographic
    richness
    

    View Slide

34. https://codepen.io/jpamental/details/OvzpEw
    

    View Slide

35. https://zeichenschatz.net/demos/vf/variable-web-typo/
    

    View Slide

36. https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/
    

    View Slide

37. What are some potential
    pitfalls
    to look out for?
    

    View Slide

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
    • ???
    

    View Slide

39. Where to
    find them
    ?
    

    View Slide

40. • v-fonts.com
    • bit.ly/vfont-sheet
    • twitter.com/variablefonts
    • www.axis-praxis.org
    • wakamaifondue.com
    

    View Slide

41. How to use
    variable fonts 

    on the web
    now?
    

    View Slide

42. How to use
    variable fonts 

    on the web
    now?
    

    View Slide

43. @font-face {
    font-family: 'Amstelvar Alpha';
    src: url('AmstelvarAlpha.woff2') format('woff2-variations');
    }
    

    View Slide

44. @font-face {
    font-family: 'Amstelvar Alpha';
    src: url('AmstelvarAlpha.woff2') format('woff2-variations');
    }
    

    View Slide

45. But wait!!
    

    View Slide

46. But wait!!
    Can I use…?
    

    View Slide

47. View Slide

48. View Slide

49. html {
    font-family: 'Amstelvar Alpha', serif;
    font-variation-settings: "wght" 400;
    }
    

    View Slide

50. html {
    font-family: 'Amstelvar Alpha', serif;
    font-variation-settings: "wght" 400;
    }
    ??
    

    View Slide

51. .variable-font {
    /* Weight axis */
    font-variation-settings: "wght" 400;
    }
    

    View Slide

52. .variable-font {
    /* Weight axis */
    font-variation-settings: "wght" 783;
    }
    

    View Slide

53. .variable-font {
    /* Width axis */
    font-variation-settings: "wdht" 100;
    }
    

    View Slide

54. .variable-font {
    /* Width axis */
    font-variation-settings: "wdht" 50;
    }
    

    View Slide

55. .variable-font {
    /* Optical sizing axis */
    font-variation-settings: "opsz" 10;
    }
    

    View Slide

56. .variable-font {
    /* Optical sizing axis */
    font-variation-settings: "opsz" 72;
    }
    

    View Slide

57. .variable-font {
    /* Italic axis */
    font-variation-settings: "ital" 0;
    }
    

    View Slide

58. .variable-font {
    /* Italic axis */
    font-variation-settings: "ital" 1;
    }
    

    View Slide

59. .variable-font {
    /* Slant axis */
    font-variation-settings: "slnt" 0;
    }
    

    View Slide

60. .variable-font {
    /* Slant axis */
    font-variation-settings: "slnt" 8;
    }
    

    View Slide

61. registered axis custom axes
    VS
    

    View Slide

62. .variable-font {
    /* Custom axis */
    font-variation-settings: "YTLC" 420;
    }
    

    View Slide

63. .variable-font {
    /* Custom axis */
    font-variation-settings: "YTLC" 570;
    }
    

    View Slide

64. https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts/
    

    View Slide

65. How to use
    variable fonts 

    on the web
    when we have CSS4 Fonts Module implemented?
    

    View Slide

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; -
    

    View Slide

67. @font-face {
    font-family: 'Amstelvar Alpha';
    src: url('AmstelvarAlpha.woff2') 

    }
    format('woff2-variations');
    

    View Slide

68. @font-face {
    font-family: 'Amstelvar Alpha';
    src: url('AmstelvarAlpha.woff2') 

    }
    format('woff2' supports variations);
    

    View Slide

69. How to support
    Drupal content
    editors
    ?
    

    View Slide

70. • Create themes using variable fonts!
    

    View Slide

71. • Create themes using variable fonts!
    • Make predefined styles available in CKEditor
    

    View Slide

72. • Create themes using variable fonts!
    • Make predefined styles available in CKEditor
    • Create Paragraphs with custom font setting options
    

    View Slide

73. • Create themes using variable fonts!
    • Make predefined styles available in CKEditor
    • Create Paragraphs with custom font setting options
    

    View Slide

74. –Jason Pamental
    “Words have power and 

    typography is their voice”
    

    View Slide

75. • Oliver Schöndorfer (blogpost)
    • Richard Rutter (blogpost 1, blogpost 2)
    • Roel Nieskens (wakanamifondue.com)
    Credits
    

    View Slide

76. Questions?
    thamas.github.io
    

    View Slide

77. Thanks for your 

    attention!
    thamas.github.io
    

    View Slide