Let's implement our very own font! And let's do so using only two basic geometric shapes: squares and quarter-circles.

Once we have a complete implementation, we will be able to turn strings into graphics rendered in that font.

Glyph: A Graphic for a Character

A font consists of glyphs: graphics for each character of the alphabet. In reality, there are also glyphs for each digit, and glyphs for each special character, and even glyphs for each emoji.

The font we construct here only contains glyphs for each lower-case character of the English alphabet.

This font is very minimalistic: we decompose each glyph into 4 by 4 cells. Many characters are only 2 cells wide, some characters are wider (e.g., the 'w' is four cells wide). A font where all characters have the same width is called a monospaced (also known as fixed-width) font. Our font is not monospaced; our font is proportional (variable-width).

Some characters are 2 cells high, some 3, and some 4. The ascent of each character (the part above the baseline) is 3 cells high, and the descent (the part below the baseline, like for a 'g') is 1 cell high.

Each cell can be one of six possible things: an empty square, a filled square, or a filled circular sector (rotated by 0, 90, 180, or 270 degrees).

On top of the shape in each cell, we also need a color for each cell. We map the row of the cell to the saturation of the color, the column of the cell to the lightness of the color, and index of the character ('a' has index 0, 'z' has index 25) to the hue of the color.

To implement our font, we need to have a mapping from characters to glyphs. We could do this by creating 26 different functions (one function for each character). Or we could do it by implementing a simple data structure that describes the contents of the up to 16 cells that make up each glyph, and then implement just one function that takes a character and returns the rendered glyph, as defined by the simple data structure.

Implementation