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

TIL about font subsetting

TIL about font subsetting

Lightning talk about subsetting fonts with Glyphhanger

Gunnar Bittersmann

March 23, 2020
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Design

Transcript

  1. TIL
    about font subsetting

    View Slide

  2. View Slide

  3. internationalisation performance
    a à á
    ą å ä ã
    α א अ
    a
    ä

    View Slide

  4. font-family: Abril Text
    font-family: Abril Text;
    font-variant-numeric:
    lining-nums tabular-nums

    View Slide

  5. glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 48.62 KB)

    View Slide

  6. glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 48.62 KB)
    U+20-7E
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.17 KB)

    View Slide

  7. glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 48.62 KB)
    U+20-7E
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.17 KB)

    View Slide

  8. glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E,
    U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.95 KB)
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 48.62 KB)
    U+20-7E
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.17 KB)
    U+20-7E,U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    ~/Library/Fonts/Abril $

    View Slide

  9. glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E,
    U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.95 KB)
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 48.62 KB)
    U+20-7E
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.17 KB)
    U+20-7E,U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-FF
    U+20-FF
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 36.48 KB)
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $

    View Slide

  10. glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E,
    U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.95 KB)
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 48.62 KB)
    U+20-7E
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.17 KB)
    U+20-7E,U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-FF
    U+20-FF
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 36.48 KB)
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $

    View Slide

  11. glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E,
    U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.95 KB)
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 48.62 KB)
    U+20-7E
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.17 KB)
    U+20-7E,U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-FF
    U+20-FF
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 36.48 KB)
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $ glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-17F
    U+20-17F
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 43.35 KB)

    View Slide

  12. glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E,
    U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.95 KB)
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 48.62 KB)
    U+20-7E
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.17 KB)
    U+20-7E,U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-FF
    U+20-FF
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 36.48 KB)
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $ glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-17F
    U+20-17F
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 43.35 KB)

    View Slide

  13. Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 45.1 KB)
    U+20-7E,U+2010-2015,U+2018-201A,U+2026,U+2030,U+2032-2034,U+2070-2079,U+2080-2089,U+20AC,U+2150-215F
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-17F
    ,U+2010-2015,U+2018-201A,U+2026,U+2030,U+2032-2034,U+2070-2079,U+2080-2089,U+20AC,U+2150-215F
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E,
    U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.95 KB)
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 48.62 KB)
    U+20-7E
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.17 KB)
    U+20-7E,U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-FF
    U+20-FF
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 36.48 KB)
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $ glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-17F
    U+20-17F
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 43.35 KB)
    ~/Library/Fonts/Abril $

    View Slide

  14. glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-17F
    ,U+2000-20BF,U+2150-215F
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 45.1 KB)
    U+20-7E,U+2010-2015,U+2018-201A,U+2026,U+2030,U+2032-2034,U+2070-2079,U+2080-2089,U+20AC,U+2150-215F
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-17F
    ,U+2010-2015,U+2018-201A,U+2026,U+2030,U+2032-2034,U+2070-2079,U+2080-2089,U+20AC,U+2150-215F
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E,
    U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-7E
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.95 KB)
    ~/Library/Fonts/Abril $
    U+20-7E
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.17 KB)
    U+20-7E,U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC
    glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-FF
    U+20-FF
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 36.48 KB)
    ~/Library/Fonts/Abril $
    ~/Library/Fonts/Abril $ glyphhanger --subset=Abril_Text_Regular.otf --formats=woff2 --whitelist=U+20-17F
    U+20-17F
    ~/Library/Fonts/Abril $
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 43.35 KB)
    ~/Library/Fonts/Abril $
    U+20-7E,U+2000-20BF,U+2150-215F
    Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 45.7 KB)
    ~/Library/Fonts/Abril $

    View Slide

  15. 0
    10
    20
    30
    40
    50
    60
    70
    80
    90
    Basic Latin
    (ASCII)
    + ÄÖÜäöüß + Latin-1
    Supplement
    + Latin
    Extended-A
    + einige
    Satzzeichen etc.
    + Blöcke
    Satzzeichen etc.
    alle Zeichen
    (kein Subset)

    View Slide

  16. Regular
    Bold
    Italic
    BoldItalic
    0 17,5 35 52,5 70
    de-subset ext-subset subset

    View Slide

  17. Das Portal der Berliner Stadtbibliothek in der Breiten Straße 32–34 in Berlin-Mitte. Es zeigt Stahlplatten
    mit 117 Variationen des Buchstaben A, geschaffen 1965 von Fritz Kühn. Foto: Jörg Zägel, CC BY-SA 3.0

    View Slide