Exploring Tiny Fonts for Tiny Screens and Pixel Art
Trying to convey language at small resolutions is an interesting area of exploration.
While working on my previous OLED projects I often needed to fit text onto the tiny 128x64 screens. That prompted me to experiment with creating 1-bit fonts that were as small as possible.
1-bit means each pixel can only be either 0 or 1 - on or off.
2x2 and 3x2 - Both Too Small
All of the potential combinations of pixels in a 1-bit image can be enumerated like a series of bits (ex, 101101....) The maximum number of possible combinations for a 1-bit image containing n pixels, is 2 ^ n.
For 2x2 pixel images there are 16 possibilities, and for 3x2 images there are 64. We can manually enumerate those:
2x2 - Impossible
To make an english font we need at least 36 symbols to represent the letters and numbers, and ideally more for punctuation. But the 2x2 space only has 16 possible characters.
To make things worse, if the images that are isomorphic (the ones that look identical, such as the four that are just single dots) are counted as single glyphs then there are even fewer options. After combining the isomorphic images there are only 10 unique glyphs left. Enough to map to the digits 0-9 with nothing left over.
This is one way of mapping them:
It's obscure, but maybe a 2x2 "numerical font" could be used on a tiny screen as a fun way to report sensor values, display a serial number, show error codes, or maybe show a clock.
Exploring that, this is a concept illustration using that 2x2 "font" to display time and temperature at the top of an idle scene (on a 64x64 canvas):
Note:
The clock on the top-left is supposed to read `23 38`` (11:38 PM), and the temperature on the top-right says `27` (Celsius).
Unfortunately this is more of a "proof of concept" than something actually useful.
3x2 - Still Too Small
The 3x2 characters have 6 pixels each so there are 2 ^ 6 = 64 possible combinations. After reducing the isomorphic images there are 43 unique symbols left.
Theoretically, that could be enough for the alphabet plus 10 digits, with 7 left over for punctuation or other. However, in reality it's not easy to express or differentiate some of the characters.
This was an attempt at creating a 3x2 font:
I don't blame you if you struggle to read that. It's supposed to show the alphabet and numbers at the top, then say The Quick Brown Fox Jumps Over The Lazy Dog, followed by Sphinx Of Black Quartz, Judge My Vow, and finally TEST_FILENAME.TXT.
Some words like Jumps or Lazy are okay, but words like Quick, Fox, Sphinx, and Judge are more difficult.
At this small size, it's easy to map some of the characters that have mostly edge lines (like L, T, U, V), but it's harder to differentiate some of the others that have a vertical "middle" component (like G, H, K, X, Y, 3, 4, 8) or a gap (like 6 or 0.) For some of the more difficult characters there's no choice but to fall back to an arbitrary glyph mapping.
Ultimately, both 2x2 and 3x2 sizes are too small to use.
3x3 - Simple Fonts
With 3 more pixels added, the image space increases 8x - rising from 64 to 512 possible symbols.
It's a lot of glyphs, but still easy to enumerate and visualize:
With all of the glyphs in front of us we can cherry-pick the ones that look vaguely like characters:
Unlike the previous sizes, the extra row we get get in this 3x3 size makes it easier to represent characters with middle segments like H, K, X; as well as characters with middle gaps like O and C.
With these options, swapping one glyph at a time, it's possible to create something on the order of 1e28 different fonts, which is... a lot.
Of course, some combinations wouldn't work well because they'd reuse some glyphs for more than one character. And some combinations would work better than others, with the symbols playing off each other to make a cohesive style to improve the legibility and aesthetics of the font.
Here are some examples of different 3x3 fonts:
Here's a mockup image of an astronomy interface showing a 3x3 font (on a 64x64 screen):
3x4 - Lots of Options
Adding 3 more pixels makes the symbols 1 row taller and it expands the possible glyphs by a factor of 8 again. The space rises from 512 to 4,096 possible symbols.
With a bit of effort we can enumerate and visualize these possibilities again.
From that enumeration we can again cherry-pick glyphs to create a list of possible mappings:
Note:
The 3x3 glyphs can also be used within a 3x4 space, but they are not included in this list.
This is enough glyph options to represent all the characters and allow for some distinct font styles.
3x4 Font Examples
This is a conceptual scene featuring a 3x4 font (on a 128x64 canvas):
3x5 - Quite Clear
At the 3x5 size, the number of potential symbols continue to rapidly increase. By adding 3 more pixels we increase the symbol space by 8x again, rising from 4,096 up to 32,768 possible symbols.
This is growing beyond the capacity to easily enumerate and review all of the symbols. Instead this list was made using an iterative, exploratory approach. I've tried to illustrate most of the possible mappings here.
It's a lot of options, and the list isn't exhaustive (there are so many more possible E's...) And this illustration still doesn't include the 3x4 and 3x3 possibilities, which are still valid within the 3x5 area. This allows for a huge number of fonts to be created, even at this tiny scale.
3x5 Demo Fonts
Even larger
For anything larger it's challenging to even try to list out the possible glyphs for each character because there are so many options.
3x6 Fonts
At the 3x6 size some of the letters start to become taller than they need to be. It's possible to keep going (3x7, 3x8, ...) if the super-tall-and-narrow style is desired.
There are 2 ^ (3 * 6) = 262,144 possible symbols to use at the 3x6 size.
4x4 Fonts
The cousin of the 3x4 fonts!
There are 2 ^ (4 * 4) = 65,536 possible glyphs here.
5x5 Fonts
Expanding the maximum width of a character from 3 to 5 makes a huge change and allows the letters some space to breathe. Letters like M, W, G, and B are finally given enough space to remove ambiguity. And it's possible to now represent characters like #, &, and @.
For systems that can support variable-width fonts the 5x5 size can look particularly nice. But even monospace isn't too bad.
There are 2 ^ (5 * 5) = 33,554,432 possible glyphs at this size.
