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.

Transcript

1. Conquer
   Variable Web
   Typography
   Venn by Dalton Maag
   

   View Slide

2. 86/60
   Oliver Schöndorfer glyphe
   

   View Slide

3. glyphe
   

   View Slide

4. 14
   font files
   453
   for web fonts only
   KB
   

   View Slide

5. 1
   font file
   56
   KB
   overall size
   

   View Slide

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
   

   View Slide

7. What are variable
   fonts?
   Voto Serif by Google
   

   View Slide

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

   View Slide

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

   View Slide

10. glyphe
    Aa Aa Aa Aa Aa
    Variable font file
    

    View Slide

11. glyphe
    A
    

    View Slide

12. glyphe
    A
    

    View Slide

13. glyphe
    Aa Aa Aa Aa Aa
    Interpolation
    

    View Slide

14. glyphe
    Aa Aa Aa Aa Aa
    Named instances
    X-Bold
    Bold
    Medium
    Regular
    Light
    Optional designs in between
    

    View Slide

15. glyphe
    Aa Aa Aa Aa Aa
    weight axis
    

    View Slide

16. glyphe
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa Aa Aa Aa
    width axis
    

    View Slide

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
    

    View Slide

18. Using variable fonts
    on the web
    Output Sans by DJR
    

    View Slide

19. glyphe
    Windows 10
    MacOS 10.13
    iOS 11.2
    
    Ɂ
    Safari 11
    ɂ
    Chrome 62
    ɚ
    Edge 17
    Ƀ
    Firefox 60
    66 %
    Global support
    Coming soon
    

    View Slide

20. glyphe
    v-fonts.com
    Discover new
    variable fonts
    try them out,
    see where to
    get them
    

    View Slide

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
    

    View Slide

22. glyphe
    axis-praxis.org
    1.
    Select font or
    drop font file
    2.
    See available
    axes and ranges
    

    View Slide

23. glyphe
    wdth
    wght
    opsz
    slnt
    ital
    5
    registered axes
    

    View Slide

24. glyphe
    Source Serif Variable by Adobe
    

    View Slide

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

    View Slide

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
    

    View Slide

27. glyphe
    Venn by Dalton Maag
    

    View Slide

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

    View Slide

29. glyphe
    Output Sans by David Jonathan Ross
    

    View Slide

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

    View Slide

31. glyphe
    Voto Serif by Google
    Optical Sizing Axis
    

    View Slide

32. glyphe
    12px 24px 48px 72px
    Low contrast
    for small sizes
    High contrast
    for large sizes
    Voto Serif by Google
    

    View Slide

33. glyphe
    Voto Serif by Google
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 72;
    

    View Slide

34. glyphe
    Decovar by FontBureau
    

    View Slide

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

    View Slide

36. Golden times
    Lab DJR by DJR
    

    View Slide

37. glyphe
    sz-magazin.sueddeutsche.de
    

    View Slide

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
    

    View Slide

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
    

    View Slide

40. glyphe
    

    View Slide

41. glyphe
    

    View Slide

42. glyphe
    

    View Slide

43. glyphe
    Output Sans Hairline by DJR
    ɂ
    Chrome
    h1 { font-size: 20vmax; }
    h2 { font-size: 11vmax; }
    h3 { font-size: 5vmax; }
    

    View Slide

44. glyphe
    Output Sans Hairline by DJR
    Ɂ
    Safari
    Supports font-optical-sizing: auto by default
    

    View Slide

45. Hard times
    Amstelvar by David Berlow
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

49. glyphe
    Aa Aa Aa Aa
    Aa Aa Aa Aa
    Aa
    Aa
    Single font Font family
    Aa
    € 30–60 € 300–700
    

    View Slide

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

    View Slide

51. glyphe
    github.com/LettError/mutatorSans
    Open
    Source
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

57. Gingham by Christoph Koeberlin
    Oliver Schöndorfer glyphe 8660.at
    Slides on speakerdeck.com/glyphe
    

    View Slide