Choosing a font

Cyrillic is not simple

The first requirement was simple yet very important: the font had to properly support Bulgarian Cyrillic. But then again - what is proper in this context? I’ve been vaguely aware for a while that there’s a difference in the typesets for Bulgarian and Russian Cyrillic, but never read up on it. Until now.

A good starting point with an overview of the history and the main visual differences is the page made by the foundation organizing Вulgarian Best Website Awards (BG Web). The most important thing I remembered from it was the striking difference between the lowercase letters. The Bulgarian ones are so much more diverse in shape and height than the Russian ones. The more varied shapes make words easier to recognize at a glance because each letter contributes more to the overall silhouette of a word. More in-depth analysis can be read in a post by Cultura magazine.

So with that knowledge, I was off to look for fonts that support Bulgarian Cyrillic. A good starting point is this page with a large selection of Bulgarian fonts.

To serif or not to serif

My next decision was a more aesthetic one - should I use a serif or sans-serif font?

I’ve been aware of the common belief that serifs are more comfortable for extended reading, but wanted to see how much truth there is to this statement. A recent study found that font preferences are highly individual. Much like glasses, it can be tailored for any person. Other studies confirm that any difference between them is at most insignificant. So I was left with a personal choice. That gave me an excuse to ask: “Why not both?”

So I decided to let readers choose whichever they find more comfortable: serif or sans-serif.

Technical implementation

After selecting the fonts for my site - Sofia Sans and Veleka - I only had to implement a way to switch between them and remember the reader’s preference for future visits.

The downloaded font files contained dozens of glyphs my website would never display, yet they would still be downloaded and stored on the devices of every visitor. Years ago in my WordPress days, I was using Tranfonter to convert and compress fonts for web use. I left only Latin and Cyrillic subsets, while dropping their extended ones along with the Greek.

This reduced the size of a single font from around 400 KB to just 28 KB - a reduction of more than 90%.

I wanted to see exactly which characters remained after subsetting, and I used Wakamaifondue. Upload a font and it shows you everything from supported glyphs to OpenType features, along with visual previews of what they do.

After comparing the original and subsetted fonts, I wasn’t entirely happy with the default glyph selection. So I built a custom list of all Unicode code points for the characters I wanted, and provided them as a Unicode ranges parameter to Transfonter. This resulted in an even smaller size of about 24 KB and the exact selection of glyphs I plan to use.

If at any point in the future I need more, I can simply rerun the process with an expanded list of Unicode code points.

Future optimization

One thing that I didn’t implement is automating the font optimization during the build process. There’s a webfont tool called Glyphhanger, that can scan an HTML file or even a webpage, get the unique set of characters used and then subset a font with only them. This will make each font grow only when new characters are introduced and further reduce bandwidth usage.

Conclusion

In the end, it turned out that fonts are not as simple if you care for every step of their deployment and use. And this is another example of the same principle that motivated this project in the first place. Spending a little more effort during development can remove a surprising amount of friction for every future visitor. Whether it’s choosing typography that feels more natural to read or trimming hundreds of kilobytes from every page load, the details matter.

Giving users the option to choose between serif and sans-serif fonts is a small UX improvement, but one that’s well worth the effort.