logoalt Hacker News

5x5 Pixel font for tiny screens

200 pointsby zdwlast Sunday at 3:19 PM52 commentsview on HN

Comments

FelipeCorteztoday at 5:43 PM

1x5 can also work if you take advantage of subpixel rendering https://www.msarnoff.org/millitext/

ludocodetoday at 7:15 PM

The 5x5 is very nice, and the 3x5 isn't bad either. Unfortunately neither of them have all of ASCII. The size is also a bit misleading because you need to add spacing so really they need a 6x6 or 4x6 grid.

I'm quite fond of Spleen:

https://github.com/fcambus/spleen

It has a 5x8 font which has all of ASCII, but most glyphs are actually 4x8 and include horizontal spacing. I modified it to reduce the rest for a project I'm doing so all glyphs are 4x8. The result can be rendered on a 5x9 grid with a guaranteed line of horizontal and vertical spacing between all glyphs. It's very nice.

jh00kertoday at 7:35 PM

I always loved the 5x6 Pixel font in this classic 90s PC game: https://covertaction.fandom.com/wiki/Cryptography_(Mini-Game...

The extra 1 pixel of height for the text in green, in particular, allowed for some cool "italic" styling, especially for letters like E, D, J, U, V

soperjtoday at 5:51 PM

If the author sees this. I think the lower case t would benefit from a pixel above the cross, similar to how the lower case k goes up one more pixel. It looks a lot like the capital T with how it is now. It is very well done though. Thanks for sharing.

show 1 reply
mikestewtoday at 7:23 PM

"Images were displayed on an Apple 30" Cinema Display"

Yowsa. For those playing at home, that monitor is over 20 years old:

https://everymac.com/monitors/apple/studio_cinema/specs/appl...

GolfPoppertoday at 7:30 PM

I didn't seen any mention of Tony Pai's quite good 3x3 font (only uppercase):

https://tonypai.itch.io/3x3-pixel-font

kibwentoday at 5:54 PM

> 4x4: Not enough to draw "E", "M" or "W" properly.

However, 5x5 isn't enough to draw "e" properly if you also want lowercase letters to have less height than uppercase, so you need at least 6 vertical pixels. And then that isn't enough to draw any character with a descender properly, so you need at least 7 vertical pixels (technically you should have 8 in order to allow "g" and "y" to have a distinct horizontal descender while still sitting on the baseline, but this is probably an acceptable compromise). And remember that in practice this means you will still need at least 8x6 pixels to draw each character, to allow for a visible gap between letters below and beside them.

show 1 reply
ESMPtoday at 7:32 PM

Wouldn't something like this be ideal for devices like Xteink X4?

octagonstoday at 6:49 PM

I developed a font with a similar resolution that was not nearly as legible for my Pi Zero with an e-ink screen many years ago. It allowed for similar tooling such as the flipper zero and esp32 marauder projects. I should fire that project up and implement this font…

TruthSHIFTtoday at 5:56 PM

Don't forget Jason Kottke's Silkscreen font: https://kottke.org/plus/type/silkscreen/

rbanffytoday at 6:40 PM

One nice use for these tiny fonts is large text in terminals. Unicode now has 2x4 (from Kaypro), 2x3 (from Teletext, TRS-80), and 2x2 mosaic characters. Unicode also has 3x3 large text (from HP terminals) but font and terminal support is limited.

show 1 reply
Dwedittoday at 6:52 PM

A 3x5 font does not sacrifice the M or W. H,M,W end up as similar looking characters, but the M has the center pixel one higher, and the W has the center pixel one lower.

z2today at 5:54 PM

The 3x2 is fascinating, it's the same resolution as braille, albeit rotated 90 degrees. I wonder if this could become a braille-like system that's both visually and finger-readable.

Note: there are repeat glyphs here like c and o, though the example actually uses a different c somehow. But perhaps repeats are ok given context.

iamjackgtoday at 5:46 PM

I actually thought of this (or a previous similar project? The one posted here seems more recent...) just a few days ago while watching the announcement video for this new DJ device, since it seems to use a 5x5 font: https://driftdj.com/dj-hybrid

ghssdstoday at 6:13 PM

You could do a bit better with a 4x5 font for every characters except M, W, m, and w which would be 5x5 but use the pixels normaly used to separate them from the next character, so every caracters still use the same width.

damiengtoday at 5:55 PM

You can get nicer 5x5 fonts amd it was not that uncommon back in the day. 4 wide is not too bad if you make the center of M and W just two pixels inset from top or bottom respectively or borrow the spacing column.

Plenty of systems did it like CP/M on the Spectrum +3 and it looks pretty decent.

IvanK_nettoday at 5:36 PM

Too bad "tiny screens" pretty much do not exist anymore. Screens with hundreds of pixels on each side are very cheap already.

It reminds me people who research "colorizing grayscale photos", which do not exist anymore either (if you want a color photo of someone you met in your life, there probably exists a color photo of that person).

show 2 replies
calebmtoday at 6:36 PM

You could call it the "Minimum Viable Font"

tliltocatltoday at 7:09 PM

At that point, just go Braille! Amazing work anyway.

dfoxtoday at 5:31 PM

IIRC the really cheap Casio Organizers/DataBanks of 90's used 5x5 font. And then my ex used something like that on linux in order to fit a ridiculous amount of xterms onto 14" CRT (somewhat absurd feat with her congenital vision defect).

JoshTripletttoday at 5:38 PM

These look great.

I would have loved to have seen a sample of the 4x5, not just the 5x5.

DonThomasitostoday at 5:41 PM

Incomplete blog post! Where was the comparison vs. a 1x1 pixel font?

lostmsulast Sunday at 3:21 PM

Small g is unreadable. I obviously know the alphabet and despite that it took quite some time to understand what letter is that.

show 1 reply
perarnengtoday at 6:17 PM

If you start from the bottom of the page directly and scroll up then the 5x5 looks even better.

onlyrealcuzzotoday at 6:52 PM

I love the design of your website!

dmitrygrtoday at 7:21 PM

I have used this one before, it uses one fewer pixels per char: (4x6 = 24 < 25 = 5x5)

https://fontstruct.com/fontstructions/show/1656341/tom-thumb

ramses0today at 5:17 PM

...and don't forget "twoslice": https://joefatula.com/twoslice.html

I haven't done the pixel-by-pixel deviation checking, but they may be comparable and independently derived!

show 1 reply
thesupereviltoday at 6:56 PM

Gg