A while ago I was asking for feedback on my countdown timer application, Big Timer. In case you don’t know it yet: I want to make the best countdown timer for design workshops. Its biggest feature is that it’s, well, big.
I put a lot of effort in making sure the numbers are as big as possible on any screen. As a result, even on a medium-sized display every detail of a font will become visible. And of course that caught the eyes of some designers using it. They complained about ‘ink traps or something’.
There were dozens of features I found more important than those tiny details, so I ignored the ink traps until it started to bug me that when in use, the UI blends out and all users see are those huge numbers. With useless ink traps. For years I’ve been thinking of making my own typeface, so I thought it would be a nice exercise to figure out how feasible that would be. After all, I only need the numbers 0–9 and a colon!
Why create custom fonts?
Besides icon fonts and ridiculously big countdown timers, there are three use cases for custom fonts I think are important.
1. Complementing existing fonts
More than once I ran into the issue of finding a font missing glyphs I really needed. Like when you just got the perfect font for a retail website but there is no ₹, € or ฿ in it. You can just make one yourself with by slicing up R, C and B and combining them with dashes.
2. Improving performance with subsets
Notice how compared to web pages, some print magazines show many more typefaces? We’re used to using few typefaces online, because loading more fonts makes the page slow. So every time a designers asks a developer to add more fonts, they get pushback. But does it have to be that way? Let’s say you’d like put the word Autumn in some special font on your homepage for the end-of-season sale. Like this:
Autumn
Loading that whole typeface could make the page noticeably slower, but loading only those 5 glyphs doesn’t make a big difference. So subsetting fonts gives us more typographic options! The Google Fonts API supports that: you can load a subset of a Google Font with just the glyphs you need by appending &text=theglyphsyouneed to your query. No need to even create custom fonts yourself! In fact, the example above is not image, but done just that way.
3. Accessible logos
Logos, or to be precise, wordmarks don’t need to be images. I’ve heard IBM has a font with the striped I, B and M (I wonder if it has more glyphs!). I can see how it could be useful or nice to have a word mark as an accessible phrase on a website rather than as an image.
Of course you can always use images of glyphs instead of creating custom fonts, but fonts have benefits:
- With real text, the application is accessible to screen readers, browser’s reader modes, search engines and whatnot.
- It’s easier for developers and the applications they build to combine a string of glyphs from a custom font than to align images.
Tools
Turns out, it’s easy to make custom font files! Big Timer is an unpaid side project, so I didn’t want to spend a lot of money for the best software (probably $ 459 for FontLab). Instead, I looked at two free alternatives: Birdfont and FontForge. I ended up using Birdfont, because it seemed to be easier to install and setup. With many common options tucked away in a single hamburger menu, I don’t find it has a good UI. The tools confused me, with tooltips inconsistently showing. So next time I’ll try FontForge, which looks ugly, but it’s open source, which makes it more attractive to create an open source font.
Process
Despite its UI, Birdfont got the job done anyway! And it didn’t take me long: about 2–3 hours, including figuring out everything in this post. My process:
- Outline glyphs from existing fonts in Illustrator
- Optimize the glyphs for my application
- Copy and paste the vector shapes to the font editor, Birdfont
- Export to font files
- Convert the TTF file to WOFF and WOFF2 with some online converter
I could have edited the glyphs in the font editor directly, but I found Illustrator’s bezier tools much easier to use. This did require some repetitive copy and pasting every time I made changes to some glyphs, but importing multiple SVG files to Birdfont was more annoying.
I forgot what online converter I used for step 5. It doesn’t really matter, it was one of the first in the search results. What is relevant, is that for web projects it’s really worth creating WOFF2 files, as these are only a quarter to one third the size of the TTF files.
Update: Before you proceed, you may want to check if your local laws and font license allow conversion and modification. Thanks to Johannes Neumeier for pointing out that if I were to publish my example, Lato’s SIL license may require me to add a copyright notice and the license itself. I don’t think the example screenshots require that, as I’m not distributing a modified version of the font and merely showing an application of the font, which, in my opinion is little different from stretching a font or applying a Photoshop filter to it.
What I’d do different next time
There are a few issues with the first font I created this way. To begin with, the glyphs appeared higher than those of other fonts, as if I had put them above the baseline. I probably had, but then I don’t know what that guideline was for that Birdfont showed. Next time I’ll test how a new font compares with existing fonts, so I get baseline and sizes right.
Some curved glyphs aren’t as smooth as they should be. In Birdfont they do look smooth, so I assume it has to do with the way they were converted to a font file. I read something about cubic beziers and some formats not supporting that, but really I don’t know enough about this, so I blame Birdfont for at least not warning me when exporting the font. So again, next time I’ll try FontForge.
For any new font project I would test the whole process and tool chain with a single glyph. That way, when issues occur, I can avoid importing glyphs from Illustrator to the font editor over and over again.
Conclusion
Custom fonts allow designers to use more fonts and glyphs than otherwise feasible. More creative freedom! Making my first 11 glyph customized font was not difficult. With some more practice and a better font editor, I think font files can become a new standard deliverable next to SVGs, PNGs, JPGs for me. If you decide to make your own custom fonts, let me know how it goes, alright?