I use a special font for brand names. Which one to use: font with just needed letters or an SVG?

Introduction

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.

Minimizing

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 105222 bytes.

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 13916 bytes!

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 3281 bytes.

Summary

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: