Game Dev Engine #8. Font Kerning.

Channel:

Jason Doucette

Subscribers:

810

Published on August 17, 2023 10:00:49 AM ● Video Link: https://www.youtube.com/watch?v=xuN8qJZAybc

Game:

Counter-Strike: Source (2004)

Duration: 2:36

544 views

5

2023-08-17. Showcasing the custom pixel fonts and variable width & kerning font rendering abilities of my "Xona System 8" engine.

All fonts you see are designed and drawn by me. Most are from scratch. Some are inspired: pigpen cipher (7x7 secret code) with numbers extension by Thomas Hunter II, Defender (4x5 2 width computer), Space Quest 3 (5x5 sq3), Brandon James Greer (4x4 bold), Super-C (7x8 super).

There are a few levels of font rendering that are not show here that precipitates the final result.

Stage 1. Fixed Width
---------------------------------
Some of the fonts are fixed width, with the understanding that they will be drawn without any concept of variable width. All fonts can be drawn this way, but the ones designed for fixed width are the only ones that work well.

Stage 2. Variable Width
-------------------------------------
Analysis of the font characters can reduce each character to its minimal bounding box, and rendering can squeeze in the small characters. This can make any font look better -- including the fonts that are fixed width by design. This opens up the design space to try anything. Now you can make fonts that are generally the same character size (as you can see by the font file names in the window title bar), but certain larger characters can expand or shrink this norm.

Stage 3. Kerning
--------------------------
While variable width already has some level of kerning, this stage takes this to its limit. While there is no aesthetic engine to determine what looks best, given that we are dealing with small pixel fonts, in general, simply moving the character as close to each other as they can be without touching gives great results. There are edge cases that don't work, such as a dash after a C, which creeps in too far. But those are very rare cases. The real complexity are the following two cases:

A. When tiny characters can hide within larger ones such as a period after a small 'r', or an apostrophe before a capital 'J'.

B. With small punctuation, you can make two characters touch that have punctuation between them, or when apostrophes should encase a character, the alignment falls apart.

Correcting for these cases makes everything look nice & aligned.


Playlists:
--------------
- Xona System 8: https://youtube.com/watch?v=PqFQv60p-0E&list=PLjnbT4UISq0YwheLThIhm3LDxIkwpmKeb
- Voxel: https://youtube.com/watch?v=uadGU-stF-w&list=PLjnbT4UISq0bQF1g85tE9jTrKfEtdRYlY
- Ray Cast: https://youtube.com/watch?v=SkaPYZOKPQg&list=PLjnbT4UISq0YcFtRFjFQqK0g6ONNCtrvY
- Graph-All: https://youtube.com/watch?v=kLSc7bZW2Bs&list=PLjnbT4UISq0YLgynFSpLzml4BMC6TDZL2
- Scroll Shmup: https://youtube.com/watch?v=l9bIYkZepPo&list=PLjnbT4UISq0Y_7IAN_zUzxgZnfhXxo_0Q
- Road: https://youtube.com/watch?v=rA4g4VX7ys8&list=PLjnbT4UISq0bnfd1RC3M4PgTgkmhlkikV
- Arena Shmup: https://youtube.com/watch?v=VKjiuq437t0&list=PLjnbT4UISq0adw__Y9B2eXA0LL35TyORU
- Wave Function: https://youtube.com/watch?v=ngctVd9VK8I&list=PLjnbT4UISq0Y8vYnrSauHkBKgOBHXFFdf
- 3D Polygon: https://youtube.com/watch?v=0Qq_euAMP48&list=PLjnbT4UISq0YyjqBGG8Q34Kng5gqDmYrT
- GW-BASIC: https://youtube.com/watch?v=QMQJ7o8e-GI&list=PLjnbT4UISq0bMjb81xFBIWOLhBKFCVkuB

Websites:
---------------
- GitHub: https://github.com/JDoucette
- Blog: http://thefirstpixel.com
- Studio: http://xona.com

Other Statistics