I Made a Font

1 week ago 6

20 Jan, 2025

Assumed Audience: anyone who is interested in fonts.

I made a font!

More accurately, I made a typeface.

Opus One is a monospaced typeface made for displaying code. If you are reading this article on blog.chay.dev via a browser, then you are looking at it right now!

Here's a code snippet as a demonstration:

/* ** float q_rsqrt( float number ) */ float Q_rsqrt( float number ) { long i; float x2, y; const float threehalfs = 1.5F; x2 = number * 0.5F; y = number; i = * ( long * ) &y; // evil floating point bit level hacking i = 0x5f3759df - ( i >> 1 ); // what the ****? y = * ( float * ) &i; y = y * ( threehalfs - ( x2 * y * y ) ); // 1st iteration // y = y * ( threehalfs - ( x2 * y * y ) ); // 2nd iteration, this can be removed return y; }

And here's a bunch of text:

PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS the quick brown fox jumps over the lazy dog 1234567890 ,.:;!?*#/\-_(){}[]"' @&|$+=><~^%`

If you are on a custom reader view, here's a screenshot for you:

Opus One Pangram Screenshot

To try it out in your editor or terminal, do the following:

download the latest release as a zip file here
unzip
install
- if you are on Windows, go to fonts/variable, shift + right click and click Install for all users
- if you are on MacOS, drag the fonts from fonts/variable into Font Book
- if you are on Linux, copy the fonts from fonts/variable to ~/.local/share/fonts
set the font family in your editor/terminal to "Opus One"

This is an early release, so there are some limitations:

only 95 glyphs in the character set: just the ones used by most programming languages
only regular and bold weights: variable font interpolation only works between 400 and 700
no ligatures
no nerd fonts

Read on if you are interested in how it's made!

Motivation

I love tinkering with software. Creating a custom typeface for my own use just seems like a really cool and fun thing to do.

Design

Opus One is a monospaced typeface, which means each character has the same width, and there's no kerning between characters.

Since this is my first typeface, I decided to play it safe and borrow heavily from existing fonts that I like. My main inspirations are:

After studying them closely, I decided I want my typeface to have these characteristics:

Slightly squarish/blockish aesthetic.
High x-height, about 75% of the cap height, which makes each character larger on average. This is my favourite part about Jetbrains Mono because it really elevates the readability of the typeface
More open apertures where possible. Code is usually displayed at small font sizes, so this is particularly important for readability. I broke this rule a few times though, because some characters look really plain when the apertures are too open.

Software

Creating a typeface is new to me, so I optimise for how easy it is to get help when I need them.

Glyphs from glyphsapp.com seemed like the ideal candidate:

they did a good job with the SEO, ranking first when I search for "typeface tool"
everyone talks about it. On reddit, typography forums, youtube tutorials, etc.
the website has lots of tutorials on making typefaces. Plus, most of them are tool-agnostic, which feels good for reasons I can't articulate well (something something thought leadership)
it has a vibrant community forum

They have 2 products: Glyphs 3 and Glyphs Mini. I played around with the trial and it seems like the Mini could not create variable fonts and TTF files. Glyphs 3 seems like the way to go, so I paid for it with a 50% student discount (I'm doing a MSc at Georgia Tech).

Resources

I bought Designing Type by Karen Cheng, an amazing book that blew my mind over and over again.

glyphsapp.com has a large online repository of information.

bezier.method.ac is a fun website that helped me get over my fear of the pen tool.

Sequence

Many advocate for starting with these letters because they help lay the structural foundation for the rest of the character set:

O, o form the basis of round characters
H, E form the basis of square characters
D, n are half-round, half-square characters

Afterwards, I tackled the derivatives from these characters:

n -> u, h, m H -> F, L, T |- I |- l, i, 1 O -> 0, Q, C |- G o -> c |- e

Next, I drew characters with diagonal strokes:

H -> N, Z, z X -> x, K, k V -> v, W, w, Y, y, A |- M 4, 7

Next, things with curves. This was the most time-consuming part of the project.

E -> B, P, R |- b, d, p, q |- g, 6, 9, a |- @ U -> J f -> t, j S -> s, 2, $, 8 |- & l -> r 3 -> 5

Lastly, the symbols:

. -> : , |- ; | -> !, ?, [, ] |- {, }, (, ) ' -> ", ` / -> \, #, ^, % - -> _, +, >, <, ~, *

Difficulty tier list

S tier: very hard

Highlight: IMO, the ampersand & is the most challenging character by far. There are so many things about it that's complicated: the skewness of the lower half, the curve meeting the diagonal line, getting the aperture between the head/tail just right.. I spent more time on this than the others in this tier combined.

A tier: hard

Curves are tough to get right, especially when aiming for a squarish/blockish aesthetic.

Highlight: I expected m to be really easy because "isn't it just 2 ns fused together?". Usually, yes, but because this is a monospaced typeface, they have the same character width, and it was really tricky to shrink the m in a tasteful manner.

B tier: harder than I thought

Most of these are "isn't this just a simple derivative of that?", like C and O. Nope!

Highlight: Some characters really surprised me by how tricky they can be because of the need to make optical corrections. For example, letter X can't just be made with two diagonal lines because they will look misaligned, because of the Poggendorff illusion.

CGJKMPRWX bcefhjktwx 6 ?#([~%

C tier: ezpz

AEFHILNTUVYZ ilvyz 147 .,!/-_'|+=>^`

D tier: simple derivatives

Highlight: For example, d, p, q are pretty much just flipped variants of b.

Building bold and italic fonts

Creating a bold font was surprisingly hard. I started by using the Offset Curve feature to make the strokes slightly wider, but obviously that won't work all the time, especially with curves or characters that are really wide. Most of my characters required a non-trivial amount of adjustments after the offset was applied.

Creating an italic font, on the other hand, was surprisingly easy. Slanting the base (regular/bold) font by 7 degrees from the baseline worked out of the box. Perhaps I was lucky.

Exporting fonts

variable: My setup can be exported as a typical "2-axis" variable font. By tagging the wght and ital axes labels on each font, i.e.

wght=400, ital=0 for Regular
wght=700, ital=0 for Bold
wght=400, ital=1 for Regular Italic
wght=700, ital=1 for Bold Italic

.. Glyphs 3 can export a variable font in ttf or woff2, that allows users to specify any combination of wght and ital, and it will just work.

woff2: Apparently woff2 is the format used by webapps. I've never used custom fonts in my limited experience with frontend development, so this was new to me.

Non-variable otf and ttf: Since it is a 2-axis typeface, there are 4 different files for each format, one for each font.

Acknowledgements

Opus One is dedicated to my wife Karis, my biggest pillar of support in making this happen.

Read Entire Article