Fonts are vector. Vector art with more points makes for larger files than vector art with fewer points. Custom fonts are downloaded. So, fonts with less points in their vector art are smaller. That’s the theory anyway. Shall we see if there is any merit to it?
Let’s take two fonts off of Google Fonts: Open Sans and EB Garamond. The number of points isn’t a dramatic difference, but the seriffed Garamond does have more of them, particularly in looking at the serif areas.
It’s not just serifs, but any complication. Consider Bleeding Cowboys, a masterpiece of a font and a favorite of pawn shops and coffee carts alike where I live in the high desert:
Let’s stick to our more practical comparison.
We get some hint at the size cost by downloading the files. If we download the default “Latin” set, and compare the regular weight of both:
| OpenSans-Regular.ttf | 96 KB |
| EBGaramond-Regular.ttf | 545 KB |
I’m not 100% sure if that’s apples-to-apples there, as I’m not exactly a font file expert. Maybe EB Garamond has a whole ton of extra characters or something? I dunno. Also, we don’t really use .ttf files on the web where file size actually matters, so let’s toss them through Font Squirrel’s generator. That should tell us whether we’re actually dealing with more glyphs here.
It reports slightly different sizes than the Finder did and confirms that, yes, Garamond has way more glyphs than Open Sans.
In an attempt to compare sizes with a font file with the same number of available characters, I did a custom subset of just upper, lower, punctuation, and numbers (things that both of them will have), before outputting them as .woff2 files instead of .ttf.
After that…
| opensans-regular-webfont.woff2 | 10 KB |
| ebgaramond-regular-webfont.woff2 | 21 KB |
I didn’t serve them over a network with GZIP or brotli or anything, but my understanding is that WOFF2 is already compressed, so it’s not super relevant.
Roughly two-to-one when comparing the file size of these two pretty popular fonts? Seems somewhat significant to me. I’m not above picking a font, assuming it works with the brand and whatnot because of size.
What made me think of this is a blog post about a font called Ping. Check out this “human hand” drawing principle it’s made from:
Whoa! A single stroke? Unfortunately, I don’t think actual fonts can be make from strokes, so the number-of-points savings can’t come from that. I purchased the “ExtraLight” variation and the points are like this:
The TTF is 244 KB, so not the sub-100 of Open Sans, but again I’m not sure how meaningful that is without a matching subset and all that. Either way, I wasn’t able to do that as it’s against the terms of Ping to convert it.
Fonts can technically be made from strokes and are particularly useful in laser cutting and CNC engraving, where they’re called “Single Line Fonts.” There’s not many out there, sadly.
Unfortunately most applications (like Illustrator) don’t treat them very nicely, due to the nature of their open paths, so most of the characters aren’t rendered properly, even when you remove the fill and replace it with a stroke.
I’d love to see a day where they were more widely supported. I could see them using SVG CSS properties like stroke-width to control “font weight.”
Font design has it’s special needs that originate from the viewing habits of the human eye. You can clearly see that the “stroke”, of this so called single stroke font above (this font just mimics a little bit the concept of a single stroke and is far from a real single stroke), has a changing width. Where the bowl touches the stem, you need to have a smaller “stroke width” to avoid dark, dens parts within the letter. That would just be a bad design. You can totally design a true single-stroke font. You just have to store the width for both sides over the length of the stroke. Eg. 10px width on the right side, at 12% of the total length. This would make a super tiny file I guess, possibly smaller than actual font-files. But at some point you’ll have to face new problems. A small a for example is in it’s concept a full circle and a stroke, joined into one single letter. If you want to draw this from one stroke like shown above, you accidently draw a greek alpha, which is not the same as a Latin a. You get the point. But great article, thank you very much.
This is a very interesting post. Not something that is though of but is something that will be in the back of my mind when i choose a font moving forward. Thanks Chris.
Steady on. All, you seem to be doing is putting the cart before the horse. You choose a font for how well it reads not how fast it downloads.
In fonts each node has a coordinate (x, y) and that is a pair of values that transfer into bytes. Also, every anchor point of a curve has a (x, y) coordinate, so… if a font has too many curves it adds more weight to the file.
Finally, besides encoding (character map) fonts have other background “font information”, that might add weight, hinting, kerning, other open type features, tables, etc…
Hope it helps!