2 min read
Which One Is Fewer Bytes? Minimizing Font or Using an SVG
I use a special font for brand names. Which one to use: font with just needed letters or an SVG?
On the sites I make I almost always include the brand name in the navigation bar. I am a maximalist with site performance. The last time I had a great idea: Because the brand name is basically a font and text, I could easily reduce its size. Let me share with you how I tried to minimize the size of the text.
Our starting point is font and text. The font I am going to use is Big Shoulders Display Bold with text “BRAND NAME”. The
.ttf font file is
105212 bytes and the text is
10 bytes (with UTF-8 encoding), so summed up it is
Remove Unused Letters
The obvious first thing I thought about was: remove all letters except letters of the brand name. I used FontForge to achieve this. As I see FontForge is Linux only, but I am sure there are other tools for other platforms (if you want to do this). By this simple ‘trick’ the font is now only
Make It an SVG
Last, I questioned: Would it be less if I would convert it to an SVG? I used Figma for this. I made a text element and exported it as an SVG. Turns out it is even less, it is
There are few variables in this equation (what font is used, how long is brand name), but I think this example shows that SVG is the clear winner. Since it is not that hard to convert a brand name to an SVG I am going to use this size optimization. There are occasions when this is not a good thing to do, for example: want more dynamic text, want to use the font elsewhere too.
Here is the overall size comparison:
|Minimized font||13.6 KiB|