5x5 Pixel font for tiny screens

5x5 Pixel font for tiny screens

Programming) All characters fit within a 5 pixel square, and are safe to draw on a 6x6 grid. The design is based off of lcamtuf's 5x6 font-inline.h, which is itself inspired by the ZX Spectrum's 8x8 font.

5x5 is the smallest size that doesn't compromise legibility:

• 2x2: Impossible.
• 3x3: Technically possible, but unreadable.
• 4x4: Not enough to draw "E", "M" or "W" properly.
• 5x5: This font.

Five by five is actually big enough to draw most lowercase letters one pixel smaller, making them visually distinct from uppercase.

Narrower 4x5 and 3x5 dimensions are possible, but would require sacrificing the M, dotted zero, and reduce U/V/Y distinctiveness. Using a constant width makes programming a lot easier: The length of a string on screen is always 6 times the number of characters. It also makes compact layouts much safer: There's no need to worry that a number will overflow because "8978" is longer than "1111".

The whole font takes up just 350 bytes of memory, which makes it ideally suited to 8-bit microcontrollers like the AVR128DA28 (16 kB of RAM). These are cheap, low power and robust but fall short on graphics. A 160x128 or 128x64 OLED is practical and cheap — but these need hand-drawn, pixel-efficient fonts to make good use of them.

For reference, here's a vector font rendered at a similar scale: Antialiasing, several megabytes of code, a megabyte of font data, and it's still terrible compared to 350 hand-crafted bytes.

Real pixels

Pixels aren't perfect squares, so the font won't actually look like the rendering at the top of this post. On an actual screen, the pseudo-dropshadow effect created by the subpixels helps. The gaps between pixels really help sell the "e" and "g", making the font look smoother than you might expect.

Even smaller fonts

While 5x5 is the smallest no-compromise resolution, a 3x5 isn't too bad. The "M", "W" and "Q" suffer, but it's still got a distinct O and zero. Something like this might actually be a good option if you need to cram (50%) more columns into a display.

At 3x4, there's no way to have a distinct upper and lowercase. At 3x3, the main loss was the numbers, but the letters don't include any duplicates and are somewhat recognizable.

Going down to 2x3 or 3x2, most letters become unrecognizable. At 2x2, there are only 10 unique non-blank shapes possible, just enough for digits, but they have no resemblance to the originals, making it more of a secret code than a font.