Page 1 of 2

font454.py — a tiny 4x5 pixel antialiased font for low-resolution displays

Posted: Mon Sep 25, 2017 1:50 pm
by deshipu
Hello micro pythonistas!

MicroPython's famebuf module comes with a built-in font which is fine most of the time, but not always suitable for all use cases. For one, it's pretty large, at 8x8 pixels per character, furthermore, it's monochrome. With microcontrollers, we often have to deal with low-resolution displays, such as small OLED modules or LED matrices. It would be nice to have a font that is smaller and more legible at small sizes.

So I designed this font: https://bitbucket.org/thesheep/font454/src

The characters are only 4×6 pixels (and most of them are actually 5 pixels high), and the font has 4 colors, which you can set while rendering it. The rendering works on any object that has a "pixel" method that takes x, y and color — so you can use a framebuf or a display directly.

I have drawn the letters by hand, trying to make them look friendly (since I'm using them for a game console project), but also legible — that means large x-height, squarish shapes, etc. It contains all standard ASCII characters.
test.png
test.png (11.48 KiB) Viewed 9171 times
The repository also contains the image and code used to generate the font, and a simple test program that generates the above PNG file. It requires pygame and python3 to run.

Re: font454.py — a tiny 4x5 pixel antialiased font for low-resolution displays

Posted: Tue Sep 26, 2017 1:13 am
by bitninja
Nice job!
Thanks for putting in the effort... it was well worth it.
20170925_200703.jpg
20170925_200703.jpg (91.89 KiB) Viewed 9149 times

Re: font454.py — a tiny 4x5 pixel antialiased font for low-resolution displays

Posted: Tue Sep 26, 2017 4:40 pm
by pythoncoder
Well done. At small sizes there's no substitute for hand designed bitmapped fonts.

Re: font454.py — a tiny 4x5 pixel antialiased font for low-resolution displays

Posted: Tue Sep 26, 2017 6:20 pm
by Hanski
Looks cool!

Re: font454.py — a tiny 4x5 pixel antialiased font for low-resolution displays

Posted: Tue Sep 26, 2017 7:32 pm
by fpp
Thanks for the picture bitninja !
It appears that Deshipu has done an incredible job (yet again), but it appears a lot more clearly in your real-life example :-)

Re: font454.py — a tiny 4x5 pixel antialiased font for low-resolution displays

Posted: Tue Sep 26, 2017 8:13 pm
by bitninja
fpp wrote:Thanks for the picture bitninja !
It appears that Deshipu has done an incredible job (yet again), but it appears a lot more clearly in your real-life example :-)
Sure!
With font454.py, I am able to squeeze 32 characters of text on 10 lines on a 128x64 OLED display. The results are pretty awesome...
20170925_223730.jpg
20170925_223730.jpg (87.56 KiB) Viewed 9116 times

Re: font454.py — a tiny 4x5 pixel antialiased font for low-resolution displays

Posted: Tue Oct 17, 2017 10:50 pm
by mcauser
Nice one Deshipu :D

Re: font454.py — a tiny 4x5 pixel antialiased font for low-resolution displays

Posted: Wed Oct 18, 2017 8:59 am
by pythoncoder
It amuses me that my efforts were in the opposite direction: using larger fonts. A sign of what happens to your eyesight with advancing years ;)
https://github.com/peterhinch/micropyth ... sd1306.JPG

Using your font on a Nokia 5110 PCD8544 84x48 LCD

Posted: Sun May 19, 2019 5:58 pm
by neurino
deshipu wrote:
Mon Sep 25, 2017 1:50 pm
the font has 4 colors, which you can set while rendering it
Hello deshipu,

could you explain better what are the 4 colors for and if they are needed on a monochromatic display?

I'd like to use your font on a Nokia 5110 PCD8544 84x48 LCD. It comes really in hando with only 84 x 48 pixels.

As is it works out of the box, rendering black text on white or white text on black, however I wonder if the antialiasing can be stripped out on a monochromatic display -- and what I should remove.

Thanks for your help

Re: Using your font on a Nokia 5110 PCD8544 84x48 LCD

Posted: Mon May 20, 2019 1:30 pm
by deshipu
neurino wrote:
Sun May 19, 2019 5:58 pm
could you explain better what are the 4 colors for and if they are needed on a monochromatic display?
It can be used for anti-aliasing when your display has more than 2 colors/shades available, and for making the font look heavier/lighter when it only has 1-bit display. Basically, if you make it 0-1-1-1 then it will look heavy, with all corners squared off, and with 0-0-0-1 it will be lightweight, with all corners diagonal. 0-0-1-1 will give you rounded corners.