Revamping a 30-year old pixel font for modern displays
The classic pixel-art fonts in OpenTTD have stood the test of time, but their original design for older CRT monitors does not translate well to today’s high-resolution screens.
Without the natural smoothing effect of CRT scanlines, the process of upscaling these bitmap-based fonts to fit modern displays often results in jagged, hard-to-read text.
Reimagining the classic OpenTTD fonts
It may come as a surprise, but OpenTTD actually comes with its own set of fonts, including normal, tiny, and newspaper styles, all of which are stored as individual bitmap images (known as sprites) for each character.
Updating an outdated font
The solution to modernizing these old fonts lies in creating a new font format - TrueType fonts.
TrueType fonts boast smooth, scalable characters with no loss of detail or pixelation, and their anti-aliased rendering replicates the smoothness of CRT displays.
Challenges of designing a pixel-inspired font
When tasked with designing a font that encapsulates the essence of pixel art while adhering to modern standards, certain design constraints must be considered.
By enforcing rules such as aligning strokes to a pixel grid, using a specific stroke width, and ensuring diagonals follow whole number ratios, designers can maintain the pixelated aesthetic while accommodating for scalability.
The design process
To maintain the pixel art aesthetic, designers must carefully adhere to specific design constraints, such as aligning strokes and curves to a pixel grid and using integer ratios for diagonals.
While these limitations may seem restrictive, they ultimately contribute to capturing the unique style of pixel art fonts.
The evolution of OpenTTD fonts
There are three main fonts in the updated OpenTTD collection:
1. Newspaper/Serif Font
The newspaper/serif font was the most straightforward to update, as it closely resembled a modern serif/Didone style with clear characteristics that could be easily translated into a TrueType font format while maintaining the original style and pixel grid alignment.
2. Small Font
The small font, while challenging due to its limited size of 6 pixels tall, was approached using a geometric method.
By constructing standard curve shapes and ensuring precision in filling in corner pixels, designers were able to create a small font that retained the essence of the original at its native size and appeared crisp and grid-based at larger sizes.