blog.chay.dev

I made a font

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:

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

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:

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 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:

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.

O
a
35
&

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.

BDS
gmnors
28
*{@

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.

Q
dpqu
09
)]}:;\"$<

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.

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

Discuss