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

TIL about font subsetting

Gunnar Bittersmann
March 23, 2020
Design
2
33

TIL about font subsetting

Lightning talk about subsetting fonts with Glyphhanger

Gunnar Bittersmann

March 23, 2020
Tweet

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
Responsive typography 2
gunnarbittersmann
0
45
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
27
3 Fehler sind zu finden
gunnarbittersmann
0
26
TIL that the future :has already begun
gunnarbittersmann
0
25
TIL how to clear floats
gunnarbittersmann
0
23
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
30
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
35
The color rebeccapurple
gunnarbittersmann
0
41
Mehrsprachige Websites
gunnarbittersmann
0
47

Other Decks in Design

See All in Design
EVeM BRAND GUIDELINE
evem_japan
0
110
BtoB SaaSプロダクトで「機能する」デザインシステムを目指して
sizucca
5
3.4k
ホワイトペーパー制作代行サービス（旧）
siteengine
0
130
Arborea - Concept Art
thebloggart
0
170
ヘルシーなウェブ制作を支える必修時短ツール
wattlaa
0
160
デザイナー向けLoglass会社紹介
loglass2019
2
210
UXA2023 Emily Underwood and Eilish Out-O'Reilly - Designing for the overlooked user we will all become
uxevents
PRO
0
130
decksh object reference
ajstarks
2
610
UXA2023 Zoë Rose - Creative thinking methodologies: a lost history
uxevents
PRO
0
120
DESIGN PERSPECTIVES　制作会社から大企業のデザイナーに転職して気づいたこと
koel
0
210
東京女子プロレス「愛される団体」のためのリブランディング
cyberagentdevelopers
PRO
0
360
Figmaの思想と新機能
sakito
17
6.4k

Featured

See All Featured
The Invisible Customer
myddelton
113
12k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
The Art of Programming - Codeland 2020
erikaheidi
39
12k
In The Pink: A Labor of Love
frogandcode
135
21k
Documentation Writing (for coders)
carmenintech
55
3.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
3.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
20k
Web Components: a chance to create the future
zenorocha
304
41k
Why Our Code Smells
bkeepers
PRO
329
56k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Teambox: Starting and Learning
jrom
125
8.1k

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