Fonts play a significant role in development and usage scenarios, such as in editors like VIM, where we use font enhancements like nerd-fonts for improved display, including icons, and more.
From a visual communication perspective, as enterprises, teams, organizations evolve, they develop and design their own fonts. Even large-scale events like the recent Beijing 2022 Winter Olympics have custom-made fonts.
Every year, these well-funded big companies or sophisticated small companies invest a lot of effort and capital in fonts. In China, there’s the monopoly of Foundertype, almost every machine shipped to China or running Chinese uses the Microsoft Yahei font designed by Foundertype.
If you unfortunately use Microsoft Yahei in your design, Foundertype will sue you for copyright infringement and seek substantial compensation. But Microsoft Yahei itself is the default font for Microsoft and its surrounding ecosystem.
How are Fonts Designed?
Firstly, understanding why you’re designing a font is crucial, i.e., what’s your purpose and what are your requirements? At least, what should it look like?
Once the requirements are clear, the next step is the design perspective and method. This article uses a monospaced font as an example.
In the above image, we can see that each font evolves from a 9×9 grid of squares, with height and width limitations set to 91 and 61 respectively.
Through this design, we get what seems like a futuristic font design draft. But this is only the first step in font design.
*Note: In font design, whether you use Adobe Photoshop, Adobe Illustrator, or Figma, stepping back, suppose you’re someone with a severe open-source obsession. No problem! We can also use GIMP, Krita, Inkscape.
Whatever you use, as long as you can export SVG, you can move on to the next step.
With a font design concept and specifications in place, what’s next?
In the second step, we need to convert the font design draft into an actual font, i.e., copying the SVG into the Unicode point of the corresponding font using font design software.
In this process, we need to use birdfont to complete this final step.
Fortunately, this excellent font design software is open-source under the GNU GPL v3 license. You can check out its repository here.
Unfortunately, despite over 3000 commits, it only has around 400 stars. This is because the author has invested a lot of time in code and hasn’t spent much time operating the community.
When you open the software, it’ll ask if you want to create a commercial font or a font based on the SIL Open Font License?
It’s worth noting that the famous Google Fonts are also distributed under the SIL Open Font License, which means you can use them for free (including in commercial projects without copyright issues). The restriction is you can’t sell fonts licensed under the SIL Open Font License.
Actually, this step is super easy. You just need to copy the well-designed SVG (preferably with spacing) into birdfont, and then adjust as needed.
Finally, when you’ve designed the necessary characters, such as the 25 letters, 0-9 numbers, and some special symbols, you can set the font name and description in birdfont and export it as TTF.
For specifics, you can refer to the Tsing-font font, which not only distributes the font for free under the SIL Open Font License but also openly shares its Figma design files and even birdfont design source files in its repository.
The font provides a simple website to showcase its style. I think you can understand the font design process and the transition from design to application through Tsing font.
How to Use the Font?
If you’ve reached the last step, i.e., exported the TTF file, then all you need to do is install it. Interestingly, each system has its own font preview description.
For example, the font test content for Ubuntu is “I can eat glass,
it doesn’t hurt me”. I’m curious what your system font test content is? Maybe you can share it in the comments.
Once the font is installed, it’s ready to use. Let’s see how our self-made font looks in Figma?
Great! Our font is usable, and we can even make it bolder by adding an outline, making it visually more appealing!
That’s it! If you enjoyed this article, be sure to give a star to the Tsing font repository!
