Categories
Bitmap Fonts Python Stupid Ideas

Meet your new favourite font editor: Microsoft Excel

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!

The worksheet

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.

A letter ‘b’ in our workbook.

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.

Using Conditional Formatting to change the look of filled cells

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.

Specifying metrics in our font

Python

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:

  • pandas to open the workbook and help us work on subsets of data
  • fontParts to create a new font and save it in UFO format
  • fontmake to 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!

Our final font in FontLab 7

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

Zoom out to see an overview of the font!

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!