Mobile app version of vmapp.org
Login or Join
Radia289

: A font that's readable with a 5px height For use in Photoshop, I'm looking for a font that's exactly 5 px high but still readable. I tried some system fonts myself like Arial, Tahoma, Segoe

@Radia289

Posted in: #FontRecommendation #Fonts #Pixelation

For use in Photoshop, I'm looking for a font that's exactly 5 px high but still readable. I tried some system fonts myself like Arial, Tahoma, Segoe UI but it all results in a pixely mess.



Ideally the font will use their space optimally and make words like 'ISDN' readable like this:


This specifically needs to be 5px. So Which typeface is suitable for marking of wires? doesn't answer my question

10.06% popularity Vote Up Vote Down


Login to follow query

More posts by @Radia289

6 Comments

Sorted by latest first Latest Oldest Best

 

@Steve758

5 px height is a critical point for readability and if it also must be single color only, it is next to impossible to get a good legible text.
That means if one takes the limit of 6 px instead of 5 px, it can be significantly better, because ascenders and descenders need
at least 1 px space and with 5 px it is impossible.

I have made a 5 px font, it is quite legible but still hard to read. Although I find it significantly better readable than the mentioned "5x5" font. It is not a .ttf font, but if you know scripting in Photoshop you could write a function which converts strings into pixel arrays.

Example:



Compared to "5x5" (taken the example from Mayersdesign's answer):



What I find interesting by designing small fonts, one can immediately notice unfortunate design of some letters, i.e. similarity of "e" and "c", and the whole [b-d-p-q-h-n-u] group actually.

10% popularity Vote Up Vote Down


 

@Bryan765

Windows' own "small fonts" at 4 or 5pt size seems to come out quite well, though you might have to pick and choose what characters look OK and which don't. If it's actually rendered properly (you may have to turn off Cleartype, or even use Paint in 1-bit monochrome colour more) then it should come out looking a bit like Berkelium above, which isn't far off a minimum-size hand-tuned face I used to use (either zoomed in and hand-pixeling, or with lots of high speed copy and paste) for putting very small text onto low resolution images.

There's so little space for conveying information in that tiny 5x5 (or 5xless) grid that you have to get a bit creative with letter shapes in some cases, like the "e" in Berkelium (it also has interesting lowercase "a" and "s" shapes IIRC), for each one to be both readable and identifiably unique. And it may well be useful to use proportional width, so you can save on pixels with thinner letters in order to spend them on those where extra width is necessary.

As someone hinted at in passing above, the 6x6 system font used on the Atari ST (for drive and uppercase file labels in the main, with 8x8 or 8x16 used elsewhere, though not exclusively) may also be worth your attention. It's essentially 5x5 the same way that the others are essentially 7x7 and 7x15, as they have vertical and horizontal spacing built in for all but the deepest descenders and box-drawing characters. Notably ISTR the e's and a's lacked openings in their loops, but they were still recognisable (and as demonstrated, if you end up modifying them into a custom typeface, you can fix that).

Other than that the smallest you tend to get in common use is 6x6 or 6x8, with or without surrounding space, or 5x7 on some dot matrix LCDs. It's hard to make a decent font with any kind of character to it rather than pure robotic functionality with fewer pixels (indeed the other examples given above feel rather familiar, as they're either identical or very similar to ones I've seen used regularly on low-rez mobile phone LCDs back in the late 90s/early 2000s). Similar to how it can be difficult to make letters (and certainly to have a choice over using upper or lower case) with 7-segment numeric LCDs, and it's not much better with 9 or 11(+) segment. And 5x5 pixel is essentially 25-segment, except really it's more like a slightly more flexible kind of 11 or 15 seg. That's the kind of constraint you're working with here.

If you can stand it, just plonk the pixels by hand... at least you have ultimate control over the hinting/kerning, then, which as mentioned by others is probably going to be your biggest issue unless your font engine is specifically tuned for, or can have an option set to tune for pixel based rendering of small typefaces, rather than assuming everything is infinite-resolution vector and of a decent size. (if you scaled up a tiny pixel font to a normal size and morphed full-size type to conform to its critical boundaries, it would look quite strange, the same as trying to cram a large face down to minimal pixels - your minimum spacing granularity is ENORMOUS vs the actual glyphs)

10% popularity Vote Up Vote Down


 

@Tiffany317

If the 5x5 pixel font suggested by Cai and mayersdesign is still too large, you could try the 4x5 pixel font I made a few years ago for a challenge on another SE site.

The original version included only the letters A to Z and the . and ! characters, but I just made an actual TTF version of the font (using an online tile-based font editor) that includes all printable ASCII characters. (No accented letters or fancy non-ASCII punctuation yet, though, and the lowercase letters are identical to the uppercase.)

In fact, I made two versions: one with variable letter spacing, and one that's monospace. Here's what they look like (at 200% size):


(direct download)


(direct download)

I haven't tested these fonts in Photoshop, but they do work just fine in GIMP: just set the font size to (a multiple of) 5px, and line spacing to 1px or more.

Also, I've released these fonts into the public domain (via CC-Zero), so you can do whatever you want with them. In particular, if you don't like some of the design choices I made (like the slashed zero, or the serifless capital I) or just want to add more glyphs, you're free to clone the font and edit it yourself to suit your needs; the online editor is pretty easy to use.



Ps. I went and made a couple of even smaller variants of this font:


(direct download)


(direct download)

At 3x5 pixels, this is about as small as a pixel font can get and still remain legible. It also, not entirely coincidentally, looks very similar to just about every other 3x5 pixel font out there.

Even at this size, some of the glyphs (especially the more complex punctuation symbols like &, @ , # and *) suffer a bit, and some creative solutions (like the minuscule-style N) are necessary to keep all the shapes distinct. Still, it's more or less readable, even if some of the letters may be ambiguous if used on their own without context (such as the M, which could be mistaken for an N or an H).

Of course, you're also free to tweak this font any way you like, or even to design your own.

10% popularity Vote Up Vote Down


 

@Samaraweera207

Berkelium 1541 is a TrueType conversion of the proportional pixel font used by the GEOS operating system on the Commodore 64 to label files and other icons on the desktop.

The text Berkelium 1541 / ISDN E18 scaled up 4 times in that font:

10% popularity Vote Up Vote Down


 

@Nimeshi706

You're going to have trouble with most fonts at that small a size. Some will have better hinting than others and be OK, but you're unlikely to find anything that perfectly works...

What you really need is a font designed specifically to work at that size. Bitmap fonts are fonts designed as actual raster images for a specific size; Photoshop has bitmap font support in more recent version so that may be an option... otherwise you just search for "pixel fonts" to find normal vector fonts that are designed to simulate a pixel grid. This was the first result for a search of "5px pixel font":
www.dafont.com/5x5-pixel.font

10% popularity Vote Up Vote Down


 

@Sent7350415

The font 5x5 which is happily free (for personal use), is made specifically for 5px font heights.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme