The word font has a significant use case in development, such as in editors such as VIM, we use fonts such as nerd-fonts[1] to enhance the display, such as icon.
From the perspective of visual communication, certain companies, teams, and organizational units will develop and design their own fonts. Even some large-scale events will customize their own one of their own, such as the recent Beijing 2022 Winter Olympics, which customized its exclusive font.
Annually. These big companies, or small companies with money, have put a lot of effort into fonts and spend a lot of money.
In the mainland, there is a large font design company such as Founder Font, and almost every machine equipped with Windows system will use Microsoft Yahei font designed by Founder Font.
If you are unfortunate enough to use Microsoft Yahei in your design, then Founder will sue you for infringement and get a high amount of damages. But Microsoft Yahei itself is the default font for Microsoft and the surrounding ecosystem.
Not only Microsoft Yahei, you can see some well-known enterprises in the mainland. For example, 360, JD.com, Taobao, Meituan, Douyin, Heytea, Shaolin Temple, vivo, Ali Health, HONOR Sans, IQOO, Ctrip, Midea, China Academy of Art's Jindao Style, Little Milan Pavilion, and even the Winter Olympics, Coca-Cola, Xinhua News Agency's news body, are all designed and developed by Founder Font.
But there are also a series of open-source fonts such as Siyuan Heiti, Siyuan Song Ti, Zhanku Heiti, Zhaoming Heiti, and Raw Stone Heiti. You can see these great projects in the Chinese Open Source Font Collection[2].
There are also a lot of proverbs about fonts in the mainland. Such as: "see the word like the face", "the word is like the person", "a word for a thousand years". Even: "There is no word in the eight". You may not know Song Huizong, but you must know the "thin gold body" under Huizong. Even if you don't know Song Huizong, then you must know Wang Xizhi and Yan Zhenqing.
For example, when we were writing when we were children, because I preferred to write ligatures (which were ugly), I would also be crowned by teachers and parents with the idiom "dragon flying phoenix dance" Yin Yang I said a few words.
Interestingly, the loading animation below when Windows boots up is also designed to be encapsulated by fonts. This is actually used a lot in Icon (because it's so convenient and a little bit faster).
So how do we ordinary people have our own font? This article is an extension of a "Qingwen" font designed for Jiang Xue.
How are the fonts designed?
The first thing to understand is how to design a typeface, and the essential thing is the design concept. Why do you want to design a font and what are your needs? At least what does it look like?
Once the requirements are determined, the next step is the design angle and approach. In this article, we take the same lining as an example.
In the image above, we can see that each font is evolved from a 9x9 square, and the height and width are limited, which is the width of 91 and the height of 61.
With this design, we got a font design that seemed like a sci-fi one. But that's just the first step in type design.
Note that in font design, whether you use Adobe Photoshop, Adobe Illustrator, or even design software such as Figma, Adobe XD, or Sketch, you can complete the design of SVG.
Taking a step back, let's say you're a person with a serious open-source cleanliness fetish, that's fine! We can also use GIMP, Krita, Inkscape.
Whatever you're using, once you can export SVG, you're ready to go.
The font has a design concept and specifications, the next step??
In the second step, we need to convert the design draft of the font into a font, that is, copy the svg to the Unicode point of the corresponding font through the font design software.
In this process, we need to use birdfont[3] to complete this final step.
Thankfully, there is such an excellent type design software, which is open source under the GNU GPL v3 license, and you can check out its repository here[4].
It's a shame that it went through more than 3000 submissions, but only 400 stars. This is because the author devotes a lot of time to code and not too much time to run the community.
When you open the software, it prompts you if you want to create a commercial font or a font under the SIL Open Font license?
It is important to note that the well-known Google Fonts[5] font is also distributed under the SIL Open Font license, which means that you can use it for free (including in commercial projects) without pursuing copyright. When restricted, you may not sell fonts that use the SIL Open Font font license.
, duration 00:29
It's super easy, you just need to copy the designed SVG (preferably include spacing in the SVG) into BirdFont and make adjustments.
Finally, when you design the necessary characters, such as 25 letters and numbers 0~9, as well as some special symbols. In this case, you can set the name and description of the font in birdfont and export it as ttf.
For more information, please refer to the Tsing-font[6] font, which not only distributes the font for free via SIL Open Font, but also publishes its Figma design files[7]
Even the birdfont design source files[8] are in their repositories.
The font provides a simple website to showcase the style of its font. I think you can use Tsing font to understand the process of font design and the stage from design to application.
How do I use fonts?
If you get to the last step, which is to export the ttf file, then all you need to do is install it. Interestingly, each system will have its own piece of font preview description.
比如 Ubuntu 的字体测试内容就是 “I can eat glass, it doesn't hurt me（我可以吃玻璃，它不会伤害我）”，而 Windows 上有的机器显示的是：“中国制造，汇集全球 Made in China…… ）”
I'm looking forward to what your system font test is about? Maybe you can share it in the comment section.
Once the font is installed, let's show what the font we make ourselves looks like in Figma.
Excellent! We can use fonts, and we can also make them bolder and look better by adding strokes to them!
, duration 00:08
As an official account focusing on CSS in the front-end field, although our fonts do not support variable (that is, variable weight). We can make fonts bold with the CSS-specific feature -webkit-text-stroke!
-webkit-text-stroke is so supportive that all browsers currently support its display, so this also allows us to ensure that the font weight is variable when it is rendered on the front end.
Problems with the display of fonts
When writing CSS, the biggest fear must be the adaptability of CSS elements across browsers. We have generated a TTF file above, and it may be that our browsers such as Chrome, Firefox, and Safari in the local environment can be displayed normally.
However, in production, Firefox and Safari may not display our TTF fonts, and we need to convert them through some tools, such as online tools like Convertio, and add them to @font-face:
@font-face {
font-family: "Tsing";
src: url("Tsing.woff2") format("woff2"),
url("Tsing.woff") format("woff"),
url("Tsing.ttf") format("truetype");
}
This is the end of the font making process. But the reality is that there is still a long time after the font is designed to design some posters and videos of the evolution of the font based on the font, integrated into the visual system of the brand. But since we are making a font for our own use, we can reduce some of the design packaging at the level of visual communication and marketing.
At last
This is the end of this article, I hope it will be helpful to you:)
If you still have any questions or suggestions, you can communicate more, the writing is limited, only sparse learning, if there is something wrong in the text, I hope to inform.
Resources
[1]
nerd-fonts: https://github.com/ryanoasis/nerd-fonts
[2]
Chinese open-source font collection: https://font.gentleflow.tech/
[3]
birdfont: https://birdfont.org/
[4]
Check out its repositories here: https://github.com/johanmattssonm/birdfont?tab=readme-ov-file#readme
[5]
Google Fonts: https://fonts.google.com/
[6]
Tsing-font: https://github.com/iepn/tsing-font
[7]
Figma's design documents: https://www.figma.com/community/file/1369266571672278927/tsing-font
[8]
BirdFont design source file: https://github.com/iepn/tsing-font
Author: IEPN
Source-WeChat public account: iCSS front-end anecdotes
Source: https://mp.weixin.qq.com/s/0a_Yz6S8lUTDICY2E6GiZg