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

    View full-size slide

  2. Diamond Sponsor

    View full-size slide

  3. Platinum Sponsors

    View full-size slide

  4. Gold Sponsors

    View full-size slide

  5. Tamás Hajas
    Front End
    Drupal Developer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. What are
    variable fonts
    ?

    View full-size slide

  9. Ab Ab Ab Ab Ab Ab

    View full-size slide

  10. Ab Ab Ab Ab Ab Ab
    Static font files

    View full-size slide

  11. Ab Ab Ab Ab Ab Ab
    Variable font file

    View full-size slide

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

    View full-size slide

  13. What
    advantages
    using variable fonts may provide?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Advantage 1.
    Less data to
    download

    View full-size slide

  18. https://dropbox.design

    View full-size slide

  19. Advantage 2.
    More responsive
    text

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Advantage 3.
    It’s animatable

    View full-size slide

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

    View full-size slide

  24. Advantage 4.
    Optical size 

    is back

    View full-size slide

  25. Advantage 5.
    Granular control

    View full-size slide

  26. Advantage 6.
    More typographic
    richness

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. • 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 full-size slide

  32. Where to
    find them
    ?

    View full-size slide

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

    View full-size slide

  34. How to use
    variable fonts 

    on the web
    now?

    View full-size slide

  35. How to use
    variable fonts 

    on the web
    now?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. But wait!!
    Can I use…?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. registered axis custom axes
    VS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. How to use
    variable fonts 

    on the web
    when we have CSS4 Fonts Module implemented?

    View full-size slide

  56. 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 full-size slide

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

    }
    format('woff2-variations');

    View full-size slide

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

    }
    format('woff2' supports variations);

    View full-size slide

  59. How to support
    Drupal content
    editors
    ?

    View full-size slide

  60. • Create themes using variable fonts!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  64. –Jason Pamental
    “Words have power and 

    typography is their voice”

    View full-size slide

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

    View full-size slide

  66. Questions?
    thamas.github.io

    View full-size slide

  67. Thanks for your 

    attention!
    thamas.github.io

    View full-size slide