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

Discussion about programs, libraries and tools that work with MicroPython. Mostly these are provided by a third party.
Target audience: All users and developers of MicroPython.
User avatar
deshipu
Posts: 1348
Joined: Thu May 28, 2015 5:54 pm

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

Post by deshipu » Mon Sep 25, 2017 1:50 pm

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 2841 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.

bitninja
Posts: 115
Joined: Thu Sep 15, 2016 4:09 pm
Location: Spring, Texas

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

Post by bitninja » Tue Sep 26, 2017 1:13 am

Nice job!
Thanks for putting in the effort... it was well worth it.
20170925_200703.jpg
20170925_200703.jpg (91.89 KiB) Viewed 2819 times

User avatar
pythoncoder
Posts: 3597
Joined: Fri Jul 18, 2014 8:01 am
Location: UK
Contact:

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

Post by pythoncoder » Tue Sep 26, 2017 4:40 pm

Well done. At small sizes there's no substitute for hand designed bitmapped fonts.
Peter Hinch

User avatar
Hanski
Posts: 8
Joined: Sat Aug 12, 2017 9:54 am

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

Post by Hanski » Tue Sep 26, 2017 6:20 pm

Looks cool!

fpp
Posts: 64
Joined: Wed Jul 20, 2016 12:08 pm

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

Post by fpp » Tue Sep 26, 2017 7:32 pm

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 :-)

bitninja
Posts: 115
Joined: Thu Sep 15, 2016 4:09 pm
Location: Spring, Texas

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

Post by bitninja » Tue Sep 26, 2017 8:13 pm

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 2786 times

User avatar
mcauser
Posts: 402
Joined: Mon Jun 15, 2015 8:03 am

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

Post by mcauser » Tue Oct 17, 2017 10:50 pm

Nice one Deshipu :D

User avatar
pythoncoder
Posts: 3597
Joined: Fri Jul 18, 2014 8:01 am
Location: UK
Contact:

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

Post by pythoncoder » Wed Oct 18, 2017 8:59 am

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
Peter Hinch

neurino
Posts: 14
Joined: Mon Aug 06, 2018 8:23 am

Using your font on a Nokia 5110 PCD8544 84x48 LCD

Post by neurino » Sun May 19, 2019 5:58 pm

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

User avatar
deshipu
Posts: 1348
Joined: Thu May 28, 2015 5:54 pm

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

Post by deshipu » Mon May 20, 2019 1:30 pm

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.

Post Reply