spring link

Posted on Jan 13

Tsing font:A Cool style font

#design #css #tutorial #opensource

This is a relatively monospaced font composed of equal-sized squares. The letters are evolved from 9x9 squares, with a space of 91x61; the numbers are 11x11, with a space of 61x61, creating a fascinating visual experience for the font.

The term “font” plays a significant role in development and has various application scenarios. For instance, in editors like VIM, we often use fonts like nerd-fonts to enhance the display, such as adding icons and other visual elements.

From a visual communication perspective, as companies, teams, and organizations grow, they often develop and design their own fonts. Even large-scale events may create custom fonts. For example, the Beijing 2022 Winter Olympics designed its exclusive font for the event.

Each year, wealthy corporations and sophisticated boutique companies invest heavily in font development, often spending substantial amounts of money.

Interestingly, even the loading animation displayed during Windows startup is designed and packaged using fonts. This approach is widely applied to icons because it’s convenient and slightly faster to implement.

So, how can an average person create their own font? This article delves into this topic, inspired by the development of a Tsing font for Jiangxue Analysis.

How Are Fonts Designed?

To understand how fonts are designed, the first and foremost step is to grasp the design concept. This means asking: Why are you designing a font, and what are your specific requirements? At the very least, you need to know how the font is supposed to look.

Once the requirements are clear, the next step is to decide on the design perspective and method. Let’s take a monospace font as an example.

In the example above, you can see that each character is derived from a 9x9 grid, with its height and width constrained—91 units in width and 61 units in height.

What’s the Next Step After Designing the Font Concept and Specifications?

In the second step, we need to transform the font draft into an actual usable font. This involves using font design software to map the SVG designs to the corresponding Unicode points for each character.

Using Birdfont to Finalize Your Font

To complete this step, you can use Birdfont, an excellent open-source font design tool distributed under the GNU GPL v3 license. You can check out its repository here.

It’s worth mentioning that well-known fonts on Google Fonts are distributed under the SIL Open Font License (OFL). This allows you to use them for free, even in commercial projects, as long as you adhere to the license terms. One restriction is that fonts under this license cannot be sold.

Steps to Create a Font Using Birdfont

Prepare the SVG Files: Ensure your designed SVGs are ready. These should ideally include proper spacing for each character.
Import the SVGs: Copy your SVG designs into Birdfont and map them to the appropriate Unicode points for each character.
Adjust and Finalize: Make any necessary adjustments to ensure consistency and usability.
Design Core Characters: At a minimum, design the essential characters:

26 letters (A–Z)
Numbers (0–9)
Common special symbols
Set Font Metadata: In Birdfont, define the font name, description, and other metadata.

Export to TTF: Once the characters are finalized, export the font as a TTF (TrueType Font) file.

Example: The Tsing-font Process

The Tsing-font project serves as a great example of this process. It is distributed for free under the SIL Open Font License and includes not only the Figma design files but also the original Birdfont project files in its repository.

Additionally, the project offers a simple demo website to showcase the font styles. By studying Tsing-font , you can gain a clear understanding of the end-to-end font design process, from initial concepts to a fully functional and distributable font.

How to Use Fonts?

For example, Ubuntu uses the phrase:
“I can eat glass, it doesn’t hurt me” as its font test content.

Great! Once our font is ready to use, we can even enhance it by adding outlines, making it slightly bolder and improving its visual appeal.

Although our font doesn’t support variable weights (e.g., adjustable thickness), we can use the CSS property -webkit-text-stroke to achieve a bold effect!

Font Display Issues

When working with CSS, one of the biggest concerns is cross-browser compatibility. While the TTF file we generated might display correctly in local environments using Chrome, Firefox, and Safari, there can be issues in production environments.

For example, Firefox and Safari might not display the TTF font properly. To address this, you can use tools like Convertio to convert the TTF file into additional formats (such as WOFF or WOFF2). Then, include these formats in your @font-face rule in CSS:

@font-face {
    font-family: "YourFontName";
    src: url("your-font.woff2") format("woff2"),
         url("your-font.woff") format("woff"),
         url("your-font.ttf") format("truetype");
}

This concludes the basic font creation process. However, in reality, after designing a font, there’s often a lot more to be done, such as creating posters and motion graphics that showcase the font’s design. These elements help integrate the font into the brand’s visual system.

Since we’re creating this font for personal use, we can skip the more extensive visual communication and marketing packaging and focus solely on using it ourselves.

Font Application

Let’s take a look at the application of this font. You’ll notice that this style of font is incredibly cool, exuding a sense of simplicity and a sharp, futuristic vibe.