6

What creating a simple font taught me about font design

 2 years ago
source link: https://uxdesign.cc/what-creating-a-simple-font-taught-me-about-font-design-616a122b272a
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

What creating a simple font taught me about font design

I never appreciated font designers until I tried it myself

An image of a Lorem Ipsum text in a good looking font on the left and my slightly less good looking self-designed font on the right.
A professional font on the left vs my very simple self-designed font on the right. Image by author.

From early cave painting and hieroglyphs to caligraphers and computer fonts, writing has been one of the most impactful human inventions. Whether you are studying for an exam, reading the news, or doom scrolling through social media, everywhere you look and everywhere you go, there’s a font.

Yet most of us take fonts for granted. If we were asked what makes or breaks a good font, most of us wouldn't be able to define it. We just expect our texts to be written in a well legible font and we don’t think about the shapes, positions, and distances of the characters. We only notice a font when it’s barely readable like the cryptic handwriting of your teacher or it’s used in a weird context like Comic Sans MS in the earnings report of a Fortune 500 company.

When I was working on a new font and text rendering system for my game engine recently, I also created a very simple font that’s packed directly into the executable. If the program cannot find or open any real font files, it still has a way to display text to the user. Even though I massively simplified the process, it made me appreciate the work that font designers put in every day so our texts can look as good as possible.

How do you design a font?

In most font formats, the characters or, as they are called in fonts, the glyphs are defined as outlines. The outlines are a set of lines and curves that establish the shape of the character, similar to vector graphics. The outlines are also using special font units that are independent of pixels, so the characters can be scaled to any size.

An image of the outlines of the letter S in the Arial font. You can see a bunch of curves and lines that define the shape of the S.
An image of the outlines of the letter S in the Arial font. You can see a bunch of curves and lines that define the shape of the S.
The outline of the letter S in the Arial font. Image created with FontForge by author.

When a character is drawn to the screen, the text rendering engine has to raster the character and decide how to color the pixels. Because pixels are two dimensional, the outline of the character often goes through the middle of the pixel, i.e. 69% of the pixel’s area is inside of the character and the rest is outside, so it has to be drawn semi-transparent.

In addition to creating the shapes of the characters, you also need to define a lot of other metrics like how much does the cursor has to advance after the character or how far does the character go below the baseline and how far above?

Why is font design so difficult?

Even just creating the outline for a single character isn’t easy. There are countless little tweaks you can make and you can go back and forth for hours just to find the perfect shape for your S. And the task of designing a whole font gets exponentially harder because you have to design a lot of characters. As soon as you are designing a whole font you also have to stick to an overarching theme so your characters match together. While your S might look good on its own, it might look weird when it’s next to an a.

There are 95 printable characters in the ASCII character set alone, which is the simplest character set with only English letters, numbers, and common special characters. If you want to create a modern font that’s useful in more languages than just English, you quickly get to the point where you have to design a large percentage of the Unicode character set, which includes 144,697 characters, symbols, and emojis at the moment.

Most fonts also include different styles like bold and italic, which also have to be designed, so if you wanted to create a complete Unicode font with three styles you would need to design 434,091 individual characters, which is basically impossible.

Creating a very simple font

As mentioned above, I recently created my own very simplified font. I wanted to have a small font that can be packed directly into C++ executables, so the programs always have a way to display text if they cannot find any real font files. Instead of designing a custom font, I could have used an open-source font as well, but I wanted to challenge myself and try to create my own.

Because I knew what a massive challenge designing a proper font would be, I went with the easiest possible option: A bitmap font with only ASCII characters and only completely transparent or completely opaque pixels, no semi-transparent transitions.

An image of the bitmap tileset with all characters of my self-designed font. There are white letters in front of a black background and hard edges without semi-transparent transitions.
An image of the bitmap tileset with all characters of my self-designed font. There are white letters in front of a black background and hard edges without semi-transparent transitions.
The tileset of my simple bitmap font. Image by author.

Despite these simplifications, it took a really long time to create the font. I kept going back and forth with the design of the characters. A character would look good in one word, but as soon as it appeared in another word next to different neighbors, it would look weird again.

After many hours and countless tweaks, I had to call it and stick with the current design. It’s not a good-looking font and it probably never will be, but it was never my goal to design a beautiful font. It’s only intended to be the backup font in case no real font can be loaded and for this use case, it’s good enough.

An image of a Lorem Ipsum text in my self-designed font in two different scales. The text is certainly readable, but the font isn’t good looking compared to professional fonts.
Lorem Ipsum written in my self-designed font with 100% scale on the left and 200% scale on the right. Image by author.

Kerning

Another difficult but even more so time-consuming part of font design is Kerning. Kerning describes the spacing between a pair of letters. For example, if a V appears after an A, the V can be shifted slightly to the left because the diagonal lines of the letters have the same angle. A well-kerned font looks better and is more pleasing to read.

While there are some letters that are more commonly kerned than others, if you really wanted to be thorough, you would need to go through every possible pair of letters and adjust their kerning values. Just the ASCII character set has almost 10,000 different letter pairs and the complete Unicode set has over 20 billion, so you can imagine how much time it would take to do proper kerning.

My new font file format has support for kerning so it can be used for professional fonts as well. Because of this I also went through some of the more commonly kerned letters like T, V, W, or Y and adjusted their kerning values, so lower case letters like vowels that appear after them look better. However, I didn’t want to go through all 10,000 combinations, so I certainly missed some character pairs, but I can always go back and tweak them when I come across a word that looks weird.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK