TIL about font subsetting

A presentation at Tech Talk @ Tagesspiegel in March 2020 in by Gunnar Bittersmann

Slide 1

Slide 1

TIL about font subsetting

Slide 2

Slide 2

Slide 3

Slide 3

internationalisation aàá ąåäã α‫א‬अ performance a ä

Slide 4

Slide 4

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

Slide 5

Slide 5

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

Slide 6

Slide 6

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

Slide 7

Slide 7

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

Slide 8

Slide 8

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

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

~/Library/Fonts/Abril $ glyphhanger —subset=Abril_Text_Regular.otf —formats=woff2 Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 48.62 KB) ~/Library/Fonts/Abril $ glyphhanger —subset=Abril_Text_Regular.otf —formats=woff2 —whitelist=U+20-7E U+20-7E Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.17 KB) ~/Library/Fonts/Abril $ 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 U+20-7E,U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.95 KB) ~/Library/Fonts/Abril $ 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 $ glyphhanger —subset=Abril_Text_Regular.otf —formats=woff2 —whitelist=U+20-17F U+20-17F Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 43.35 KB) ~/Library/Fonts/Abril $ 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 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 Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 45.1 KB) ~/Library/Fonts/Abril $

Slide 14

Slide 14

~/Library/Fonts/Abril $ glyphhanger —subset=Abril_Text_Regular.otf —formats=woff2 —whitelist=U+20-7E U+20-7E Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.17 KB) ~/Library/Fonts/Abril $ 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 U+20-7E,U+C4,U+D6,U+DC,U+DF,U+E4,U+F6,U+FC Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 29.95 KB) ~/Library/Fonts/Abril $ 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 $ glyphhanger —subset=Abril_Text_Regular.otf —formats=woff2 —whitelist=U+20-17F U+20-17F Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 43.35 KB) ~/Library/Fonts/Abril $ 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 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 Subsetting Abril_Text_Regular.otf to Abril_Text_Regular-subset.woff2 (was 133.95 KB, now 45.1 KB) ~/Library/Fonts/Abril $ glyphhanger —subset=Abril_Text_Regular.otf —formats=woff2 —whitelist=U+20-17F ,U+2000-20BF,U+2150-215F 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 $

Slide 15

Slide 15

90 80 70 60 50 40 30 20 10 0 Basic Latin (ASCII)

  • ÄÖÜäöüß
  • Latin-1 Supplement
  • Latin Extended-A
  • einige + Blöcke Satzzeichen etc. Satzzeichen etc. alle Zeichen (kein Subset)

Slide 16

Slide 16

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

Slide 17

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