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

Conquer Variable Web Typography

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.

Oliver Schöndorfer

April 23, 2018
Tweet

More Decks by Oliver Schöndorfer

Other Decks in Design

Transcript

  1. 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
  2. glyphe Aa Aa Aa Aa Aa Named instances X-Bold Bold

    Medium Regular Light Optional designs in between
  3. 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
  4. glyphe Windows 10 MacOS 10.13 iOS 11.2  Ɂ Safari

    11 ɂ Chrome 62 ɚ Edge 17 Ƀ Firefox 60 66 % Global support Coming soon
  5. 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
  6. glyphe 12px 24px 48px 72px Low contrast for small sizes

    High contrast for large sizes Voto Serif by Google
  7. 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
  8. glyphe sz-magazin.sueddeutsche.de Work Sans Regular Work Sans Medium Work Sans

    Bold Work Sans SemiBold Work Sans Variabel? ~80 KB 166 KB
  9. glyphe Output Sans Hairline by DJR ɂ Chrome h1 {

    font-size: 20vmax; } h2 { font-size: 11vmax; } h3 { font-size: 5vmax; }
  10. 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
  11. 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
  12. glyphe Aa Aa Aa Aa Aa Aa Aa Aa Aa

    Aa Single font Font family Aa € 30–60 € 300–700
  13. 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 € ?
  14. 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
  15. 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