TIL about font subsetting

051dbe29a972707cde167602b38c9778?s=47 Gunnar Bittersmann
March 23, 2020
Design
2
12

TIL about font subsetting

Lightning talk about subsetting fonts with Glyphhanger

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

March 23, 2020
Tweet

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
1
11
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
20
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
19
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
45
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
37
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
38
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
19
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
27
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
230

Other Decks in Design

See All in Design
5bbcb4bd0ee08d725339ac48ba50b6d9?s=48 tyoys00
0
160
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
1
21k
Eaff30126722754cd5aaba88df528251?s=48 retrotale
2
470
3dfed36dc1543f0007b5fd46fcb41a47?s=48 yunoda
0
900
Df24915d508e0f89ea1868c1b9819443?s=48 masashiokawa
0
120
8ba8bdc8f653a517ed8c300fbec98f15?s=48 drthdan16
0
150
04220a462f57cb4551c9659e94c71354?s=48 kwzr
4
220
32b869eccead66531b4749ea9f146aed?s=48 yuinamiki
0
440
Cbad96d5495a9ba501d2518042c89502?s=48 kazuakiebe
2
250
B896d135180958999cd053869215f3f0?s=48 ohtristanart
0
200
1777ae7e124a0cadd15d9f88d871c963?s=48 toranomanji
0
140
Ed8d0bfdd4badbac64cefb21a5c7ae88?s=48 allenzhangart
0
130

Featured

See All Featured
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
8.6k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
7.7k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
325
14k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
478
150k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
510
78b475797a14c84799063c7cd073962f?s=48 holman
448
130k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
282
18k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
142
19k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
70
3.5k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
65
2.9k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
4
490
9128d500301ae51524e887bb680f471d?s=48 caitiem20
304
16k

Transcript

  1. TIL about font subsetting

  2. None

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

    א अ  a ä

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

  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)

  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)

  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)

  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 $

  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 $

  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 $

  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)

  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)

  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 $

  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 $

  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)

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

    ext-subset subset

  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