Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Variable fonts in the real world

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

Tamás Hajas

July 06, 2018
Tweet

More Decks by Tamás Hajas

Other Decks in Technology

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

  14. None
  15. None
  16. A

  17. A

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

  19. What advantages using variable fonts may provide?

  20. None
  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…?

  47. None
  48. None
  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