TL;DR:
- If your variable font file is significantly larger than 35K you may ask yourself "How did I get here?"
- Two font files (of the same family) means more bytes than one variable font that does both
For context see part 1 and part 2.
After publishing part 2 of my ongoing web fonts file size study, I got feedback on Mastodon to the effect of hey, what about variable fonts?
Good question! I speculated in part 2 that there may be savings if we can combine font variants (bold, italic) in a single file, sprite-style. And that's just what a variable font is (and more!)
Rerun them scripts
Following the process described in part 1. I grabbed only fonts from Google fonts that have [wght] in the name and subset them to the LATIN subset, throwing away those with fewer than 200 characters. Also I removed all fonts with "Italic" in the name.
Why [wght] only and not stuff like AdventPro[wdth,wght]?
I wanted to keep only one variable dimension so we can see apples-to-apples as much as possible. And [wght] seems to be the most popular dimension by far.
Why no Italic?
I wanted to keep fonts kinda diverse. Chances are AlbertSans-Italic[wght].ttf and AlbertSans[wght].ttf are designed by the same person (or people). So they are using similar techniques, optimizations and so on. And I'm looking for what's "out there" in general.
Results
Here are the results in HTML and in CSV format.
And just a taste of what the results look like...
| Num chars | Num glyphs | Bytes | File | Font name |
|---|---|---|---|---|
| 235 | 378 | 21400 | Afacad[wght]-subset.woff2 | Afacad |
| 217 | 243 | 34688 | Aleo[wght]-subset.woff2 | Aleo |
| ... | ... | ... | ... | ... |
| 241 | 609 | 61456 | YsabeauOffice[wght]-subset.woff2 | Ysabeau Office |
| 241 | 621 | 62552 | Ysabeau[wght]-subset.woff2 | Ysabeau |
| 241 | 584 | 58688 | YsabeauInfant[wght]-subset.woff2 | Ysabeau Infant |
Overall stats:
- Average File Size: 50532.85970149254 bytes
- Median File Size: 34744 bytes
- Average Glyph Count: 438.4179104477612
- Median Glyph Count: 328
- Median Character Count: 222
- Number of font files: 335
Conclusions?
- In part 1 one of the conclusions was: the median file size of a regular web font with Latin-extended subset of characters is 19092 bytes. Where "regular" means no bolds, no italics, etc.
- Here we see that the median file size of a variable web font with Latin-extended subset of characters is 34744 bytes
- The sum is smaller than the parts. A variable font that has both normal and heavy (bold) weight (and also everything in between) is slightly smaller than two regular fonts. Assuming that a bold font file is as big as a regular (we'll check on that assumption later), then 19092 * 2 = 38,184 is greater than 34,744
The file size difference is not big but we can still see a saving probably because of duplicate metadata and some other similar elements in two files vs one. And there there's also the delivery saving - 2 HTTPS requests vs one.
Potential skew-age?
- Smaller subset: here we're looking at the median file size amongst 335 files vs 1009 files in the original study.
- Uneven number of characters: the median number of characters here is 222 where in the the original study it was 219. Not a big difference but still... Also overall the total number of characters is random (but over 200) in both studies. We can control for this (in a followup) by comparing only 200-char subsets for example.
- Google fonts only: well yeah, that's an easy corpus of fonts to download and mess around with.
Next?
In the spirit of part 2 I'd like to study the sizes when incrementing the number of characters in a subset (as opposed to a catch-all LATIN). This will address potential skew #2 above. Probably not increments of 1 but of 50 to save some processing.
I'd also like to experiment with ALL the fonts available. So far I've been looking at "Regular" and [wght] only. But I should just do it all and then have people smarter than me (such as yourself, my dear reader) slice the results and draw conclusions any way you want.