One the things I do when starting a design for a user interface for a device with limited capabilities is to sketch it out with pencil and paper. Or these days, a design proposal document in Word or Markdown, or for a more complex UI a dedicated wireframing tool such as Balsamiq.
A number of projects over the years have used simple character-based LCD displays. These typically feature a very limited amount of text (the largest I’ve encountered in the wild has four lines of twenty characters), with the big advantage that they are very easy to use both electrically and in software.
Mocking up display text to decide on fundamental questions like how big a display do we need is more natural if a font is available that more closely matches the look and feel of the LCD. I couldn’t find one, so I made my own.
Dot Matrix Basics
The big advantage of the character mode LCD panels comes from their use of a simple dot matrix representation for each character. Each character cell is made up of an array of pixels, usually five columns wide and seven rows tall, although an eighth row is often present. It turns out that this is just enough resolution to draw most glyphs of (7-bit) ASCII in remarkably recognizable forms.
The display controller chips typically use 8-bit memories for the character array, and allow all 256 codes to map to visible glyphs. For ease of use, those codes that are printable ASCII mostly map to the expected ASCII character.
The codes with the eighth bit set map to a collection of Japanese Katakana and other symbols, and the codes corresponding to ASCII control characters usually map to user-defined glyphs.
For my immediate requirements, I don’t need any custom glyphs and won’t be using the katakana, so I will concentrate on the 96 printable ASCII characters.
Supporting Cast
BabelMap is a utility for browsing characters available in fonts installed on your system. It is much like the stock CharacterMap utility, but much more powerful.
FontStruct is a web based font design tool that allows for design of highly graphical fonts through placement of block elements on a grid. This design model matches well to the creation of dot matrix fonts.
fontTools is a library for manipulating fonts, written in Python. TTX is a font conversion tool based on the library that can convert a variety of fonts into an XML form, and convert the XML back into a font in a variety of formats.
FontUtils is a collection of font manipulation utilities written in Perl that includes fret, which draws nice reports showing detailed views of all glyphs in a font.
How I Did It
The usual approach to creating a new font from scratch is to start with a full-featured font design tool like fontographer (expensive) or fontforge (free, but tricky to use, and even trickier to use on Windows). In the past, I’ve used fontforge with some success to create a small symbols font for a hobby project, but it’s workflow is not designed for fonts with highly repetitive shapes as in dots on a grid.
Searching for some form of existing dot matrix fonts led me to FontStruct where I found several available fonts that were styled after dot matrix displays, but which were not faithful enough to the look and feel. Most of the fonts I found were variable-width which would make illustrating a fixed character position display more difficult.
FontStruct is also an editor with the interesting constraint that all editing is done by dropping pre-defined shapes on a grid. The shapes included blocks that nearly filled a grid cell, and that nearly perfectly match the appearance of the dots in the real LCD panels.
From that point, it was mostly a matter of finding the character repertoire chart from a typical LCD display controller data sheet and a lot of clicking.
The result is LCD st7036 dots Regular, available for download and use under a CC-BY-3.0 license.
Here’s a screen shot of BabelMap showing the 96 printable characters:
Foreshadowing
This font was drawn by hand, but it could be automated. Automating it would allow for easily creating custom glyphs, and can be done by writing XML describing the font for compilation to TrueType with TTX.
Since a dot matrix font can be fully described with just a few bytes per character, automating its creation would seem to be a natural task.
A related task would be to automate fonts representing segmented displays, starting with the classic seven segment, and including the more versatile starburst displays with 14 or 16 segments.
Summary
I decided I needed a font that faithfully reproduced the look of a character mode LCD panel, and after failing to find one I created my own using FontStruct.
If you have a project involving embedded systems, micro-controllers, electronics design, audio, video, or more we can help. Check out our main site and call or email us with your needs. No project is too small!
+1 626 303-1602
Cheshire Engineering Corp.
710 S Myrtle Ave, #315
Monrovia, CA 91016
(Written with StackEdit.)
Words from Cheshire Engineering Corp. 