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.

6f9d2ee92d3cf8fd7f505c82ee184e43?s=128

Oliver Schöndorfer

April 23, 2018
Tweet

Transcript

  1. Conquer Variable Web Typography Venn by Dalton Maag

  2. 86/60 Oliver Schöndorfer glyphe

  3. glyphe

  4. 14 font files 453 for web fonts only KB

  5. 1 font file 56 KB overall size

  6. 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
  7. What are variable fonts? Voto Serif by Google

  8. glyphe Aa Aa Aa Aa Aa X-Bold Bold Medium Regular

    Light
  9. glyphe Aa Aa Aa Aa Aa X-Bold Bold Medium Regular

    Light
  10. glyphe Aa Aa Aa Aa Aa Variable font file

  11. glyphe A

  12. glyphe A

  13. glyphe Aa Aa Aa Aa Aa Interpolation

  14. glyphe Aa Aa Aa Aa Aa Named instances X-Bold Bold

    Medium Regular Light Optional designs in between
  15. glyphe Aa Aa Aa Aa Aa weight axis

  16. glyphe Aa Aa Aa Aa Aa Aa Aa Aa Aa

    width axis
  17. 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
  18. Using variable fonts on the web Output Sans by DJR

  19. glyphe Windows 10 MacOS 10.13 iOS 11.2  Ɂ Safari

    11 ɂ Chrome 62 ɚ Edge 17 Ƀ Firefox 60 66 % Global support Coming soon
  20. glyphe v-fonts.com Discover new variable fonts try them out, see

    where to get them
  21. glyphe @font-face { font-family: 'Venn'; src: url('Venn.woff2') format('woff2-variations'), url('Venn.woff2') format('woff2');

    } Will become the standard Fallback for the others
  22. glyphe axis-praxis.org 1. Select font or drop font file 2.

    See available axes and ranges
  23. glyphe wdth wght opsz slnt ital 5 registered axes

  24. glyphe Source Serif Variable by Adobe

  25. glyphe Source Serif Variable by Adobe font-weight: 327; font-variation-settings: "wght"

    327;
  26. 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
  27. glyphe Venn by Dalton Maag

  28. glyphe Venn by Dalton Maag font-stretch: 78%; font-variation-settings: "wdth" 78;

  29. glyphe Output Sans by David Jonathan Ross

  30. glyphe Output Sans by David Jonathan Ross font-style: oblique 10deg;

    font-variation-settings: "slnt" 10;
  31. glyphe Voto Serif by Google Optical Sizing Axis

  32. glyphe 12px 24px 48px 72px Low contrast for small sizes

    High contrast for large sizes Voto Serif by Google
  33. glyphe Voto Serif by Google font-optical-sizing: auto; font-variation-settings: "opsz" 72;

  34. glyphe Decovar by FontBureau

  35. glyphe Decovar by FontBureau font-variation-settings: "TRMC" 1000, "SKLA" 400, "SKLB"

    800, …
  36. Golden times Lab DJR by DJR

  37. glyphe sz-magazin.sueddeutsche.de

  38. 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
  39. glyphe sz-magazin.sueddeutsche.de Work Sans Regular Work Sans Medium Work Sans

    Bold Work Sans SemiBold Work Sans Variabel? ~80 KB 166 KB
  40. glyphe

  41. glyphe

  42. glyphe

  43. glyphe Output Sans Hairline by DJR ɂ Chrome h1 {

    font-size: 20vmax; } h2 { font-size: 11vmax; } h3 { font-size: 5vmax; }
  44. glyphe Output Sans Hairline by DJR Ɂ Safari Supports font-optical-sizing:

    auto by default
  45. Hard times Amstelvar by David Berlow

  46. glyphe Overchoice Many options make it harder and require much

    more knowledge
  47. 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
  48. 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
  49. glyphe Aa Aa Aa Aa Aa Aa Aa Aa Aa

    Aa Single font Font family Aa € 30–60 € 300–700
  50. 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 € ?
  51. glyphe github.com/LettError/mutatorSans Open Source

  52. glyphe black-foundry.com/vesterbro Add on

  53. glyphe cjtype.com/dunbar/variablefonts/info.html Retail

  54. glyphe blog.typekit.com/variable-font-technology-from-adobe Subscription Model?

  55. 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
  56. 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
  57. Gingham by Christoph Koeberlin Oliver Schöndorfer glyphe 8660.at Slides on

    speakerdeck.com/glyphe