Nanofont3x4: Smallest readable 3x4 font with lowercase (2015)
github.com
github.com
- PICO-8's 3x5 font with support for programming characters: https://www.lexaloffle.com/pico-8.php?page=faq
- Ken Perlin has an RGB stripe subpixel font. Unfortunately, the original page uses Java so I can't access it, but https://www.fastcompany.com/1662778/the-worlds-smallest-legi... has more info.
- Dotsies if you're willing to try very strange encodings: https://dotsies.org/
- https://news.ycombinator.com/item?id=33127419 has more examples.
52 upper/lower case letters + 10 numerals ≈ 64 = 6 bits
It's kind of amazing that the overhead is only a factor of 2 to literally read BINARY data with my eyes.
And that a 1bpp uncompressed image of a piece of text can be only 50% larger in file size than its .txt file and be readable.
What it is readable for you, is not for me.
Just map lower case to uppercase and replace any non alpha-num to a black square. This font is not for general use but just to squeeze text messages on tiny displays.
TBH, I see all this pretty useless. While still interesting enough.
https://chinese.stackexchange.com/questions/16669/lowest-pix...
Considering that when we view text on a modern display we're almost always seeing anti-aliased grayscale pixels with subpixel rendering, it doesn't make sense to me that you'd design a font that doesn't take advantage of that.
Why not even grayscale? Surely a few of the letters could be improved by using a pixel other than pure black or pure white?
We were getting lots of clipping of text and I asserted that even a couple more characters on the screen would improve people’s abilities to guess what the entire phrase was. You can derail momentum in project management meetings by having people ask what something says repeatedly. Seen it happen, it’s dumb and we can fix it.
So it came down to a shootout. We put five fonts on a projector screen, at multiple font sizes, stood everyone against the back wall of the fairly average sized meeting room (maybe 70th percentile), and had them vote.
Verdana 13pt won for legibility, even over some of the 14 pt fonts. It also got more characters per inch, so win win. Something in the range of 5-10%.
Then corporate made us change it back because their flagship app used a different font and they wanted them to match. Which made no goddamned sense because they weren’t even used together.
It's difficult to read even when you know it's the Declaration of Independence.
However, given that the size is required anyway, there's no downside to using more detail. This font could be useful for a display with enormous pixels, but it's useless otherwise.
At this pixel scale I say just blat brail onto the screen and give people one more reason to learn that already well established and unambiguous writing system.
It's truly impressive feat to get it this small. I used to do texts like this, often manually, pixel by pixel. For websites and games, it was all the rage back in late nineties early 2000s.
But only now I start to truly understand,by experiencing first-hand, why accessibility matters. This font is awesome, but terrible for any kind of accessibility.
> Once the novelty wears off a "practical" example would be rendering "in-game book pages" that don't look like complete gibberish, or an "accurate print preview" with real text instead of blurry placeholder pixels that don't even look close to being the glyphs scaled down.
The lower case letters can mostly be read just in context. Looking at the characters here [0] 'g' is just a vertical solid rectangle and 's' is two diagonal pixels. 'W' looks more like an 'M' than the actual M letter.
[0] https://raw.githubusercontent.com/Michaelangel007/nanofont3x...
I also can't read it at 100% on a high-density monitor, but I can read it very comfortably at a normal size, even though glyphs have so few features.
You wouldn't say that Super Mario is unplayable because it's too tiny at 256x224. You would just have you 4k TV show big pixels and get on with the game.
While pc version has extensive mod support, console ports lack necessary Lua api. So the only way I came up with to implement this - is to draw additional info on the sprite textures. And sprites are tiny - 32x32 pixels. Ok, I can't put a lot of text in such small space, but maybe I can fit item name and then add some simple 8x8 icons for effects.
I started searching for a good font I can use, but ultimately most of the 3x4 and 3x5 fonts I tried had one issue - they're almost unreadable if the background color is not absolute negative of font color. I could've put an opaque black background behind text, but that would hide more art than necessary and even look somewhat hideous.
While trying one font after other I found gremlin-3x6[1], it's only 2 pixels higher, but 5-10x easier to read. And it's under public domain license.
Ok I mostly don't care about height, but width is still an issue - almost all item names exceed 32 pixels and have to wrap around on second line and some need a third line. That I absolutely do not want.
I had an idea - If I can't shrink letters to less than 3 pixels, I can remove space between them. Wouldn't it make harder to read? Not unless all letters have different colors! That also solves the problem when background matches the color of font!
[0] - https://codeberg.org/Archargelod/isaac-extended-icons-mod [1] - https://fontstruct.com/fontstructions/show/1488093/gremlin-3...
And another from earlier version of the mod - https://codeberg.org/Archargelod/isaac-extended-icons-mod/sr...
Of course unfortunately not everyone has a connection like that. But can understand how someone might have missed it.
I work in B2B and we frankly put way more effort in than we should have to optimize bundle size before just making the assumption that everyone has a good connection and we didn’t really need to worry about it.
Can you provide links to a page that is 250 MB download?
The images on the page load quite slowly. Wifi is terrible here due to way too many hotspots and way too many different businesses providing their own wifi. And the trunk which it is on is also horrible in it's own right so even when the wifi connnection is ok, it's still broken.
So no, this is not fine.
(ping is between 100-4000ms on a good day and speeds between 100Kb/s to about 40Mb/s (that's bit, not misspelled byte), on a bad day it's None)
Lower case "a", "e" and "i" are not ideal, but the rest look pretty good to my eyes! (The OS used this for icon titles, so there was only ever 1 row at a time. Probably recommended.)
I could learn to read this. I can kinda-sorta make out the example, because I already know the Declaration of Independence. Is it readable the way, say, this text is? Or the PICO-8 font? No.
The characters in the font are unique and clear so learning to read it should be easier that say reading using some completely unknown alphabet.
This font should be easier to read than most people's hand writing.
taken to a silly extreme, you could compress 26 letters into 2 pixels, 3 colors, and 3 levels of opacity. before even considering a time-dimension.
a mantis shrimp just needs one pixel with color.
A readable font takes no practice to read, presuming you already read the script of the font and the language of the text. A decipherable one can be sort of limped through at first and probably picked up to fluency with experience. Although, as the article notes, this font has homonymous glyphs, there are only a few words where that creates ambiguity, and as few as none where it would be ambiguous in context.
No. Any font takes a lot of practice to read. Maybe the difference is that you define "readable" as readable immediately by anyone who is already familiar with modern fonts?
I'm sure medieval fonts were readable to pepole who wrote them, but when I look at them I need to labor at every letter.
Yes, people aren't born knowing how to read.
> you define "readable" as readable immediately by anyone who is already familiar with modern fonts
This is the only reasonable definition of "readable".
(starts thinking in Z80...)
[1]: not(c0) and not(c2) and c3 and not(c4) and c5 and not(c6) or not(c0) and c2 and c3 and not(c4) and c5 and c6 or c0 and c2 and not(c3) and c4 and not(c5) and c6 or c0 and not(c1) and c2 and c3 and c4 and c6 or c0 and c1 and not(c2) and c3 and c4 and c6 or not(c1) and not(c3) and not(c4) and c5 and c6 or not(c2) and c3 and c4 and not(c5) and not(c6) or not(c0) and c1 and not(c3) and c5 and not(c6) or not(c0) and c1 and not(c2) and not(c3) and c4 or not(c0) and c1 and c3 and not(c4) and c5 or c1 and c3 and not(c4) and c5 and c6 or c1 and c2 and c4 and not(c5) and not(c6) or c0 and not(c1) and not(c4) and c5 and not(c6) or c0 and not(c2) and not(c4) and c5 and c6 or c0 and c1 and not(c3) and c5 and c6 or not(c0) and not(c1) and c4 and not(c5)https://github.com/Veltas/spectrum-env/blob/master/font-orig...
https://github.com/Veltas/spectrum-env/blob/master/font-smal...
Rendering:
https://github.com/Veltas/spectrum-env/blob/master/text.asm#...
Looking back at it, my Z80 for this isn't that good, but it was still fast enough to redraw a whole line of text in 1 or 2 frames, I'm sure others can do better.
If you are having trouble with it, try this: "Use the force!!" By which I mean, forget that its written in a very small font, don't go looking for the individual pixels, but just relax and read like any other text. Don't look at the letters, look at the words. Your brain fill in the details for you.
Font-rendering limitations also play out in UIs, too. VS Code has a feature where the side-bar can become something like a map of the code document. It doesn't actually show the code though because there isn't the room. But could a font like this show more of the code? Letting you quickly navigate a large module. I'm sure there are more use-cases for this because displaying text is so fundamental to computing.
Makes me wonder whether some languages are better at this than others. French, for example, contains some redundancy in its grammar as you have to write pronouns and write the conjugated verb. Spanish gets rid of the redundant pronoun. So is French trading longer sentences for better readability? I wonder what natural language can have the shittiest font?
Nice work! The uppercase is surprisingly readable -- some glyphs don't look like you'd first think they should, but that makes them stand out from the ones they'd otherwise be easily confused with.
So did this font exist all along and was simply discovered?
And same goes for everything we create, but just in higher dimensions??
Neat!
The lower case one takes a lot more adjustment. I did end up reading it fairly well, but never with the ease of the uppercase font.
I've used glyphs as small as 4x5 but I've struggled to come up with anything smaller for most characters.
Here's an example of a full text adventure for the 2600 if anyone's interested https://github.com/JetSetIlly/Adventureland-2600
Better or worse with an even smaller font? I'm not sure.
Weird that the lowercase letters with ascenders are taller than normal uppercase, I didn't notice that. But yeah, the core numbers+uppercase box is 3x5 (with only "Q" violating that). And it's all on a 4x8 grid.
https://github.com/pret/pokered/blob/master/gfx/font/font.pn...
For example it chose this (ambiguous) encoding for "o":
--
xx
xx
--
where a bigger 3x4 font could choose the overhigh and wider
-x-
x-x
-x-
---
I find one of the things a repository of a font should do is to put pictures of how this thing looks quite far up in the readme, so that I can quickly see, whether that is something for me or not.
Would be cool to integrate in my split keyboard OLED screens in ZMK firmware.
For all the discussion here, I feel like the README answers it. It was a fun project with a few use cases.
> Once the novelty wears off a "practical" example would be rendering "in-game book pages" that don't look like complete gibberish, or an "accurate print preview" with real text instead of blurry placeholder pixels that don't even look close to being the glyphs scaled down.
This seems very reasonable. They put it out there in case someone found it usefuo.
Low-res or LoD video game textures are a bit of a stretch but could be cool.
My parents had a laser printer for their business. I realized that it had a very high DPI and also very little ink bleed. I started printing whole books I downloaded at the smallest font size that I could managed to still read, just a few point. I removed line breaks and printed out whole books on a page or two. I found it incredible how much tiny text I could fit on a page.
In class I would read with a little half folded sheet of paper hidden in a notebook. Sci-fi, Russian lit, biographies, classics. I was never caught, but it’s bizarre to think back that I was reading Crime and Punishment while the rest of the class was learning fake American history propaganda.
Sounds possible your teachers figured as much and let it slide.
You were simply unaware of the classmates who were secretly mastering the tiny 3d printed blade.
It's the same text as the upper case version and it's the Declaration of Independence, which a lot of us know pretty well. I initially tricked myself into believing that I could read it until I got past the part that I knew well, at which point I realized that I wasn't reading it so much as using the shapes as a mnemonic to help remember it.
(As an aside, it's not nitpicky to say "I can't read this font that bills itself as the smallest readable font", it's just an expression of doubt as to the advertised qualities of the font.)
Readable by who ?
*Roman alphabet