Do you fancy having a go at designing bitmap fonts but don’t know where to begin or what software to use? Then why not try Microsoft Excel! With a bit of Python, and an Excel workbook, you too can create bitmap fonts suitable for use in your applications!
First things first. We need to create a new Excel workbook and structure it in a particular way. We’ll need to store information such as
- Glyph names
- The glyph bitmap, i.e. a grid of pixels that are either on or off to represent the shape of the glyph
- Font metrics, i.e. values for the ascender, cap height, x-height and descender
- Glyph widths and sidebearings
We can then create a Python script that can locate this information and generate our final font file.
Making a glyph
Each of our glyphs will be made up of a grid of pixels, and we can represent this as a grid of cells in our worksheet. Firstly let’s reduce the width of the cells in our worksheet to make them look square. Then we can start drawing our glyph by typing a 1 in a cell to switch it on, and clearing it to switch it off.
It can be quite hard to view whether a cell is on or off, so we can use Excel’s Conditional Formatting feature to change the cell’s background depending on its contents.
Setting the metrics
We’ll need to set the font metrics – the ascender, descender, x-height and cap-height. We can do this by adding a column to the left of the worksheet, and using text to specify where each of those metrics sit in the final font.
Finally, let’s add a ‘header’ row. By specifying which columns make up each glyph, we can control the glyph’s width and sidebearings.
We now have an Excel workbook with all the information we need to create a font. Let’s turn to Python and write a script to open our workbook, extract the glyph data and metrics, and turn all this into a working font. It all sounds daunting but helpfully there are some great open source packages to help us with the heavy lifting. They are:
pandasto open the workbook and help us work on subsets of data
fontPartsto create a new font and save it in UFO format
fontmaketo convert the font into the formats we need
There are a few things we need to calculate. Firstly we need to work our how big our pixels should be (in font units) to fit inside the font’s UPM. Once that’s done, we can work out our font metrics as a multiple of the pixel size. Finally we can iterate through each glyph, working through the relevant rows and columns in the workbook and drawing a pixel in our font where our cell is set to 1.
The code is available to view on GitHub. Clone that repository, create a virtual environment, then run:
python src/convertExcelToFont.py -i sources/PixelFont.xlsx -o build/Pixelly.ttf -f ttf -n Pixelly
And hey presto, we have a ttf font!
There’s a fine line between stupid and clever
When I first hit upon this idea, I thought it would just be a throwaway comedy blog post. But you know what? Excel is relatively usable as a font editor! Fill a cell by typing 1, clear it by hitting the Delete key. Clear an area by selecting it and hitting Delete. Alter sidebearings by shifting cells left and right. Get an overview of the whole font by zooming out, or work on a single glyph by zooming in. Ensure the metrics are always shown on the left by using Freeze Panes. I could go on! (But I won’t.)
Should you wish to try this out for yourself. the code and a sample pixel font is available on GitHub. (Spoiler alert: the code is very much ‘proof of concept’ and quite fragile.)
And do let me know if you create anything!