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. Conquer
    Variable Web
    Typography
    Venn by Dalton Maag

    View full-size slide

  2. 86/60
    Oliver Schöndorfer glyphe

    View full-size slide

  3. 14
    font files
    453
    for web fonts only
    KB

    View full-size slide

  4. 1
    font file
    56
    KB
    overall size

    View full-size slide

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

  6. What are variable
    fonts?
    Voto Serif by Google

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. glyphe
    Aa Aa Aa Aa Aa
    Variable font file

    View full-size slide

  10. glyphe
    Aa Aa Aa Aa Aa
    Interpolation

    View full-size slide

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

    View full-size slide

  12. glyphe
    Aa Aa Aa Aa Aa
    weight axis

    View full-size slide

  13. glyphe
    Aa
    Aa
    Aa
    Aa
    Aa
    Aa Aa Aa Aa
    width axis

    View full-size slide

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

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

    View full-size slide

  16. glyphe
    Windows 10
    MacOS 10.13
    iOS 11.2

    Ɂ
    Safari 11
    ɂ
    Chrome 62
    ɚ
    Edge 17
    Ƀ
    Firefox 60
    66 %
    Global support
    Coming soon

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  20. glyphe
    wdth
    wght
    opsz
    slnt
    ital
    5
    registered axes

    View full-size slide

  21. glyphe
    Source Serif Variable by Adobe

    View full-size slide

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

    View full-size slide

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

  24. glyphe
    Venn by Dalton Maag

    View full-size slide

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

    View full-size slide

  26. glyphe
    Output Sans by David Jonathan Ross

    View full-size slide

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

    View full-size slide

  28. glyphe
    Voto Serif by Google
    Optical Sizing Axis

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. glyphe
    Decovar by FontBureau

    View full-size slide

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

    View full-size slide

  33. Golden times
    Lab DJR by DJR

    View full-size slide

  34. glyphe
    sz-magazin.sueddeutsche.de

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

  39. Hard times
    Amstelvar by David Berlow

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide