On the GLCD fonts

(ignore the fact that the min temperature is higher than the max ^_^’)

For now, I’m just going to put forth some background on the fonts used on my emonGLCD setup shown in my last post. I do plan to make them available to any who want to use them eventually, but there is still a significant amount of work to be done. So, for the time being, I hope this explanation is interesting enough to be going on with ^_^

Size

First I will explain the reasoning behind the sizes I chose as this was the first stage in my design process. I started with the smallest size that can reasonably be used to produce a legible font (in uppercase at least, as my plan was to use primarily uppercase text on the GLCD) which is 3×5 pixels. Now there is not much flexibility at this size in terms of the design of the characters, but it serves as a starting point upon which to build.

I had already decided on a monospaced font as I thought it would be the easiest to arrange on the low resolution graphical LCD and also it would accommodate the various numerical data changing without causing the fixed labels and symbols to move around as they did with the default fonts (which were based on Helvetica I think). But one of the main reasons for designing my own font and not simply utilising the monospaced options included with the GLCD library is that I wanted different sizes of text to work together with equal spacing between lines even if some lines had more than one size of text in them.

So to create the larger sizes, I doubled the dimensions of the smaller font and also included allowance for character and line spacing. This meant the larger fonts were to be 7×12 and 15×26. This means that each size is the same width as 2 characters of the size below with 1 pixel between them, similarly the height is equal to 2 smaller characters on above each other with 2 pixels for the line spacing.

Showing the different font sizes and illustrating the grid they conform to, enabling them to be tiled nicely

Design

There’s not much to say about the design really apart from briefly mentioning the shape I went with in the end. As with the sizing, I started with the smallest size and tried to keep each character as square as possible, both to emphasise the grid and also to differentiate it somewhat from the other fonts that I was trying to replace.

The full range of characters in the smallest size. Some of the symbols and lowercase characters are a bit awkward, but I included them anyway for completeness.

With the larger fonts I wanted to keep the proportions of the characters as consistent as possible so as well as doubling the size I doubled the thickness of the lines for each size. However, having completely square corners of the larger fonts looked a bit, shall we say, ‘unrefined’, so I decided to round them off, but this was hard to achieve nicely with the low resolution so I ended up going for a simple chamfer (this is only really apparent on the largest size, the medium size does not really have enough resolution to differentiate between a rounded corner and a chamfer).

Lowercase is work in progress, however at present there is no allowance for the tails to drop below the line without disrupting all of the sizing.

The largest size only has numbers

A couple of small quirks – the * actually is drawn as the degree ° symbol, so to print ° on the screen you use * in the code. Also the large size has a W from the medium size in it for the watts symbol, in order to avoid faffing around trying to use two different fonts in the same string.

That about wraps it up for this post! As I mentioned at the start, I will release these fonts in due course, once I am happy with them. Oh, and as a bonus, there will also be a TrueType version ^_^

Coming Soon