Glyph design: lowercase letters with bowls (d p q)

o
i
a

b
l
n

d p q
e
f
v
h u m
r

c
j
t
y
w
x

k
z

g
s

The letters ‘d’, ‘p’, and ‘q’ all possess bowls that are incredibly similar to that of the ‘b’. Although the bowls are not exactly identical, they can all be very easily derived from the ‘b’.

All four letters can be related to each other. The letter ‘p’ is traditionally thought of as a letter ‘b’ with its ascender depressed, and given a descender. The ‘d’ in turn is made by rotating the ‘p’ 180 degrees, and replacing its bilateral serif with an angled head serif. The ‘q’ is then made by removing the ascender from the ‘d’ and adding a descender, much like making the ‘p’ from the ‘b’. The descenders are almost always the same length as the ascenders. It's also possible to derive all the letters from one of the four letters—the ‘b’-centric method is shown below.

The lowercase ‘p’, ‘d’, and ‘q’, related to the ‘b’

A passable ‘p’, ‘d’, and ‘q’ can be made by just reflecting the ‘b’ and sliding the stem up and down. In fact, quite a few commercial designers just leave these letters like that.

A quality typeface will, however, have a few tweaks for each letter. The bowl–stem joins of the ‘p’ and ‘d’ are usually steeper, and their bowls are more diagonally elongated. Out of the four letters, ‘q’ and ‘b’ resemble each other the most, with ‘q’ in most ways being a ‘b’ rotated 180 degrees. Most old style ‘q’s ,however, have a small spur on their upper right corner. Also keep in mind that when you have a bilateral serif (like in ‘p’ and ‘q’), the half on the side the letter would “fall over” on should be slightly longer than the other half of the serif.

If you are following along with your own typeface, at this point you should have twelve letters in your font. Congratulations—you are almost halfway through the lowercase alphabet!

From typeface to font—part two: Font metrics and importing into fontforge

 Part one »

Since I drew the glyphs in a vector program, Inkscape, the letters are technically already digitized. If I had drawn them out on paper I would have to scan and then trace the glyphs. But before we can copy and paste glyphs into a font, we must first understand exactly how a font deals with all those little em rectangles.

Fonts subdivide ems into an arbitrary number of font units which they use as their internal coordinate system. For a truetype font (one that ends in .ttf), each em is typically broken down into 1024 or 2048 font units. In the newer opentype format (.otf), each em usually contains 1000 font units, though this isn’t a requirement.

The origin of a font’s coordinate system is usually displaced some distance upwards, giving rise to negative coordinates. The x-axis is used as the baseline of the typeface. Typically, the displacement is between one quarter and one fifth of an em unit, so a font’s em rectangle might extend all the way up to 780 font units, and all the way down to –220 font units, giving a total height of one thousand font units. Letter parts can be found outside of this range—the descender of a ‘p’ might reach a coordinate of –235 font units, but if the text is set with no leading, the descender will intrude into the next line's em rectangles.

Vertical metrics of Proforma. Proforma has an ascent of 0.8 ems and a descent of 0.2 ems.

The app we’re going to use to put the glyphs into a font is called FontForge. It’s free and open source and at the time of writing, still being actively developed (after a period of dormancy). I won’t go over how to install it as there are plenty of guides on how to do so. I recommend building fontforge from its source code. It's easier than it sounds and the build guide holds your hand every step of the way. Plus the precompiled fontforge packages tend to be very old and buggy, so building from source is a good way of ensuring freshness.

From typeface to font—part one: The em square

Up to this point, I have not technically been making a font, rather sketching a typeface design. Everyone has slightly different interpretations on what the two words mean, but generally, a typeface is taken to mean a design that may include multiple styles (regular, italic, bold, etc), and a font is a piece of software (or in the old days, a boxed set of metal type) that prints the letters in the shape of the typeface.

A font is a technical implementation of a typeface. The typeface is what we’ve been making so far. I used a simple vector drawing program (Inkscape), but you could use a pen and paper to sketch the glyphs too. But for an app like a word processor or web browser to use the letters we’ve drawn, the glyphs need to be digitized and packaged in a font file. Font files store the letters of the typeface in specific spots that apps know to look in to find that particular glyph. All modern font formats also include information on letter width and kerning (custom letter spacing), and some can do stuff like substitute ligatures and toggle on and off old style figures (we’ll get to those).

Before you can start putting a font together, though, you have to work out the em size. The em is the height of an imaginary rectangle than the letters of your font are mounted on. In the days of metal type, the em was an actual block of metal that had the letter on it (each metal block with its letter was called a sort). The em could be different sizes—an 8 point em would be half the size of a 16 point em, and the letter on the sort would scale with the em.

An actual piece of metal type (the fi glyph) from Garamond.
Credit Daniel Ullrich, on Wikimedia Commons

When you typeset text, you line up a bunch of these rectangles with the letters you want—digital or back then, metal—and arrange them in rows to form a paragraph. In metal typesetting you would put strips of lead in between the lines to space them out. Double spaced type would have strips that were one em high—the same as the height of the sorts. These strips were called the leading, pronounced “ledding”. It’s still called that today, except now computers insert virtual leading instead of actual metal strips to set the line spacing.

Text from Wikipedia

However, sometimes you might want to know how big the pieces of type used were—i.e. the English teacher who wants to know if a paper was set in twelve point type. If you know the leading, you can figure out the type size (the reason they ask for it double spaced), but otherwise, it is impossible to tell how big the original sorts were.

Test run: All together now!

Once you have the ‘a’, ‘o’, ‘i’, ‘b’, ‘n’, ‘v’, and ‘e’, it’s a good idea to put all your glyphs together and see how the typeface works, like this:

You should best be doing this every time you draw a new glyph, actually—like I've been doing behind the scenes. But if you've put it off until now, it's a good idea to iron out all the inconsistencies at this point, before the ‘b’ parents the ‘d’, ‘p’, and ‘q’, and you have maybe four letters to fix instead of one. While the curves should not be exactly the same, the curves of the ‘a’, ‘n’, ‘b’, and ‘f’ should evoke the same shape; the bowls of the ‘o’, ‘e’, and ‘b’ should have similar hardnesses; and all the glyphs should have roughly the same hairline thicknesses, and appear to be the same weight.

Now is also a good time to enact sweeping changes to your font, like weight or serif shape. For example, I noticed that my typeface was looking a bit too heavy for a book weight. It would be nice for a medium weight, but I prefer to work with lighter weights, so I made the typeface lighter. I also made the head serifs slightly thinner and less angled.

You should also pay attention to the over and undershoots—as it turns out, the undershoot on the ‘v’ was a bit too much, and the ‘f’ was a little shorter than the ‘b’. So having all the letters next to each other helps you find and correct problems like that.

It’s also a good idea to scale the glyphs up and down to see how the typeface performs at display and more importantly, text sizes. Here’s my typeface scaled down to three text sizes, with their baselines and side bearings aligned to pixels to provide natural hinting:

In my case, it’s encouraging since it indicates that my typeface is already legible down to a baseline–meanline height of just 7 pixels.

Glyph design: the lowercase e

o
i
a

b
l
n

d p q
e
f
v
h u m
r

c
j
t
y
w
x

k
z

g
s

The ‘e’ is probably the last character you should design before stepping back and taking a good look at how your glyphs look together. Oh you could go and make the ‘x’ too, but I like to draw the line at ‘e’.

The ‘e’ is one of the hardest letters to draw and design—probably third only to ‘s’ and ‘g’. While commonly thought of as an ‘o’ with a crossbar and a gap cut out of its lower right, the ‘e’ is really more of a spiral that ends abruptly with a crossbar.

      While the letter shares little else in common, like the ‘b’, the ‘e’ is elongated diagonally and can be thought of as having two axes—an axis that the counter (or what would be the counter if the letter was closed and had no crossbar) is aligned to (pink), and another “outer axis” (gold) that the outer contour is aligned with.

Left to right: Minion Pro, Garamond, Sorts Mill Goudy

Glyph design: the lowercase f

o
i
a

b
l
n

d p q
e
f
v
h u m
r

c
j
t
y
w
x

k
z

g
s

     Oh, my favorite letter—'f' ! The 'f' is a rather straightforward letter to design; the main difficulties lie in the proportions. It is very easy to make an 'f' that looks unstable, and designers are also prone to making 'f's that are stubby or inelegant.

     Except for the tricky arc of stem (called a hook, in the 'f'), 'f' is basically an 'i' or 'l' with a cross stroke. The cross stroke is an important part of the 'f' since it's one of the most distinctive parts of the letter, and also because it will be reused in 't' and many special characters.

Components of a lowercase 'f'

     The hook of the 'f' cannot be derived from any letters we have drawn so far. You can't use the arc of stem of the 'a', since that arc goes in the opposite direction (and you should only reflect a glyph over one axis with great caution). The shoulder of the 'n' is also unsuitably round and wide. So we have to start from a blank constructed from an 'i' and a 'b', and design the letter from that.

Glyph design: the lowercase v

o
i
a

b
l
n

d p q
e
f
v
h u m
r

c
j
t
y
w
x

k
z

g
s

     The letter 'v' is one of the easiest letters to design, though the diagonal strokes can be difficult to physically draw. The 'v' consists of just two diagonal strokes—a diagonal and an arm, their joint—the vertex, and two flat bilateral serifs on top.

Components of a lowercase 'v'

     Out of all the letters of the lowercase alphabet, 'v' has the least variation among different typefaces—the letter can be very accurately described in just a few parameters. The 'v' only varies in its stroke contrast (determined by the other letters in the typeface), its serifs (taken from 'i' and slightly modified to fit the angled strokes), and for a few daring designers, the shape of its vertex.

Five 'v's and five 'a's from Minion Pro, Warnock, Proforma, Garamond, and Hoefler, overlaid.

     In serif type, the angle the two diagonals make is almost always 42–46 degrees. Even the extremely didone didot font Vogue uses (or used to use, now that they changed their website) has a 45 degree 'v'.

     The letter 'n' that we just made is also a good indicator for how wide we should make the 'v'. If the 'n' was made correctly, it should generate a 'v' with an angle around 44-ish degrees ( ± 3 degrees ). The diagonal should be almost as wide as the 'n's stem; the arm should be about as wide as the 'n's arc–stem join. The vertex is usually the same width as the arm of the 'v'.

Glyph design: the lowercase n

o
i
a

b
l
n

d p q
e
f
v
h u m
r

c
j
t
y
w
x

k
z

g
s

     The 'n' is arguably the most important letter in an entire typeface—in fact many designers draw this letter first when they start a typeface. It gives rise to the 'h', 'u', 'm', 'r', and influences the 'v'.

     The 'n' is not a particularly hard letter to design, though a great deal of thought should be given to the letter's shoulder, which is the most distinctive part of an 'n'. Other than that, its two stems are easily derived from the stem of the 'i'.

Components of a lowercase letter 'n'

     While the join of the 'b' informs the arc–stem join of the 'n', the letter is constructed from an 'i' and an 'a'. The 'a' provides the arc of stem, and the 'i' provides the two stems. Note that the bilateral serif for the second stem is made from the short ends of two 'i' serifs.

The 'n' can be made from an 'a' and an 'i'.

     Then the shoulder just needs to be cleaned up to make the join.

Glyph design: the lowercase b and l

o
i
a

b
l
n

d p q
e
f
v
h u m
r

c
j
t
y
w
x

k
z

g
s

     The letter 'l' is so easy to derive from the 'i' that I won't bother to cover it. You simply drop the tittle from the 'i' and extend the stem. A minority of designers think the top serif should be lengthened and the angle lessened though.

     The letter 'b' and its siblings 'p', 'd' and 'q' are derived from the 'o' and the 'l', but 'b' is substantially harder than 'l' to get right. The letter 'b' (or 'l', if you insist on going through that step) is also the first letter we make that has an ascender. An ascender is any stem or arc of stem of a letter than extends above the mean line (note that overshoots don't count as ascenders). Letters with ascenders are the ones that you would draw up to the solid blue line in kindergarten*, as opposed to the dashed blue line which crudely represented the mean line. Letters with ascenders include 'b', 'd', 'f', 'h', 'k', 'l', and arguably 't'. Inversely, a descender is a stem or arc of stem that extends down below the baseline, like in 'g', 'j', 'p', 'q', and 'y'.

     The proportion between the height of the mean line and the height of the ascender line is called the x-height, named because it's most easily measured from the letter 'x' and any letter with an ascender. In kids' handwriting books, the x-height is almost always 50 percent, but in most text typefaces, it's a little bit more than that. Smaller x-heights seem more quaint, while larger ones (up to the point of reason) are considered more readable.

Components of a lowercase 'b'

     Ascenders always have unilateral serifs pointing left, which in a non-didone typeface means that they are angled and pointy. Normally, serifs like that need an overshoot to look right, but since all the ascenders are like that, there are no flat tops to compare them to, so the overshoot is not a very meaningful concept here.

     In theory, the letter can be constructed by cutting off the left part of an 'o' and sticking it on an 'l', but this creates a pretty ugly looking 'b'.

It's okay to change your mind!

     Very often you will be in the middle of designing a typeface, and then decide that you want to change something. That is perfectly fine, and that’s also the reason it's a bad idea to draw too many homologous glyphs in the beginning. The earlier you are in the design process, the easier it is to change the typeface.

     Take a look at my ‘a’. I constantly tweaked the letter after leaving off on the ‘a’ post :

     It now has a flat spur-serif, and a slightly more wedge-like terminal.

     My ‘i’ also got a thinner and longer top serif:

     And even the ‘o’ got some subtle rounding:

Glyph design: the lowercase i

o
i
a

b
l
n

d p q
e
f
v
h u m
r

c
j
t
y
w
x

k
z

g
s

The ‘i’ is a fairly simple letter, and relatively easy to design (unlike the ‘o’ which is simple but tricky to design well). Its stem is also found in no less than thirteen other letters. So ‘i’ is a pretty important letter.

Structure of the ‘i’

The ‘i’ consists of just a single vertical stem, and a dot called a tittle.

Components of a lowercase letter ‘i’

Stem

     The vertical stroke that makes up the body of the ‘i’.

Serifs

     The serifs are the most important part of the ‘i’, since they will be reused in so many other letters. The ‘i’s stem ends in an angled half-serif on top—called a unilateral serif—and a full serif on the bottom—called a bilateral serif since it extends out in both directions. Bilateral serifs are almost always flat to the baseline, and visually (but not mathematically) symmetrical. Unilateral serifs on the other hand are usually angled, usually to the stress of the typeface.

Glyph design: the lowercase o

Once you've made the ‘a’, you should go on to make the next most important letters: ‘i’ and ‘o’. Almost every letter of the lowercase alphabet can be derived from ‘a’, ‘i’, and ‘o’.

o
i
a

b
l
n

d p q
e
f
v
h u m
r

c
j
t
y
w
x

k
z

g
s

This post will be on how to construct the letter ‘o’.

As far as the lowercase alphabet goes, ‘o’ is one of the simpler letters. The important features of the letter are shown below:

Components of a lowercase letter 'o'

Bowl

     The curved part of the ‘o’. So basically, the whole letter.

Overshoot and undershoot

     These aren’t technically parts of the letter, rather how much the ‘o’ extends above the mean line (generally the height of a lowercase x and most of the lowercase letters) or the baseline. This is done to make the ‘o’ look the same size as other flat-topped letters, because of an optical illusion that makes circles look smaller than rectangles of the same height.

     There are also a few other features that aren't strictly letter parts, but are still integral to the letter's structure:

Glyph design: the lowercase a

Once you know what kind of typeface you’re going to make, then comes the fun part—drawing the glyphs. If you are doing a lettering job, of course you already know which glyphs you need to do first, but for making a typeface from scratch, there are some letters that are useful to make first. Generally the first letters you should design should include o, n, v, b d p or q (pick one), and a couple others. It varies by designer. I like to make a o i b n e f and v, in that order. Many of those letters are useful because each one can be used to derive several other letters, so together, they define almost the entire lowercase alphabet (except for the letters ‘g’ and ‘s’). This first glyph design post will focus on how to design the lowercase ‘a’.

o
i
a

b
l
n

d p q
e
f
v
h u m
r

c
j
t
y
w
x

k
z

g
s

But of all the letters, why ‘a’ ? The letter ‘a’ can't be used to directly derive any other letters; in fact, it and its oddball friends ‘g’ and ‘s’ are the three unique outsiders of the lowercase alphabet. But while ‘a’, ‘g’ and ‘s’ are alone in terms of structure, they are actually really good letters for setting the tone of your typeface. The ‘a’ has a good variety of curves which help you work out the general shape you want your typeface to have. So ‘a’ can give you a good idea of how you want your ‘n’ and ‘o’ to look like, and even help you indirectly derive them, which in turn tells you how to make the rest of the lowercase alphabet. Of the three letters, ‘g’ is also harder to design than ‘a’, and ‘s’ is significantly harder than both of them, so ‘a’ is a better letter to start with. Most people generally know the shape of the letter ‘a’ better than they do the ‘s’ and certainly the ‘g’ (whose serif form almost nobody knows how to write these days). ‘a’ is also the first letter of the alphabet, and the third most common letter in the English language, making it a logical choice to begin a typeface with.

Basic shape of the ‘a’

First things first, this:

is not an ‘a’. This ‘ɑ’, known as the single story ‘ɑ’, is the cursive variant of ‘a’. ‘ɑ’ is common in script typefaces and italic fonts, but as typographers and middle school girls know, the true roman (not italic) form of this letter is:

Linux Libertine Regular

This form is called the double story ‘a’. Almost every serif font ever made uses this form in their roman style. In fact it’s a very bad idea to use the first form in place of the second, since to some phoneticians, ‘ɑ’ and ‘a’ are actually different letters.

Planning your typeface

     It goes without saying that before you even start a typeface, you should already know what kind of typeface you’re going to be making. That doesn't mean you should wake up and go “I’m going to make a humanist sans serif today!”, but if you want to expand a hand lettering job you did, or satisfy a certain look/feel, some good questions to ask yourself are:

• Is it a display (headline) or text (paragraph) typeface?
• What do you see it being used for?
• Does it have serifs?
• How didone (stroke contrast and angle) will it be?
• What era or culture should it evoke?
• Will it look squarish or round?
• What existing typefaces will it be based on?

      You don’t have to have answers for all of these questions, and this list is definitely not all inclusive, but it’s a good starting point for designing a new typeface.

     The font that I’m going to be making is going to be a text serif typeface. It should be one that you can set a textbook in, but it should also look good at larger sizes so you could for example, blow up a phonetic transcription on the screen in a presentation. Didone typefaces are not good for reading, so its stroke contrast and angle will probably fall between that of an old style and transitional. The typeface will be somewhat rounded, if anything because there are way too many flat superelliptical open source typefaces. The curves and shoulders will be flattened, but not along the horizontal or vertical axes. My all-time favorite serif fonts are Minion and Proforma so the new typeface will probably be modelled on them. Garamond is also “the old style serif typeface”, so it will be very informative on some basic serif type design conventions.

Introduction: An overview of libre typography

This blog

     In this blog, I'm going to be writing about designing a new typeface, and releasing it as an open source font. Designing a high quality typeface takes a long time—months, often years—so this blog will document my progress along the way. The open source program FontForge will be used to make the font. Unlike other font projects, I'm also going to write about the design process for the glyphs, in a letter-by-letter way, so that more people can learn about type design. And since each creative decision will be documented here, I hope that this will be the first open-design font. A person should be able to follow the process, and at each design junction, they should be able to fork the design itself and go in a new direction to make a different typeface.

An overview of libre typography

     This chart shows a few representatives of some of the different kinds of serif type that exist (slab serifs like Rockwell not included). The fonts are grouped and sorted by their type classification, and color coded by their license.

A crash course in type classification

     On the left column are old styles, transitionals, and didones, sorted from most "old style" to most didone. The differences between them are pretty well documented. The fonts at the top are the oldest old style types*—they're usually used to evoke a sense of the colonial era. Transitionals are a really broad group that can be understood to encompass anything between an old style and a didone. The most common example, though probably not the most representative, is Times New Roman. Didones or modern serifs are the kinds like Bodoni. With almost perfectly vertical weight stress, and hairline serifs, they are often associated with high fashion and high mathematics. Some designers break these groupings down into even finer categories, but the names don't matter, only that you know the differences between the two ends of this style spectrum. The most readable fonts tend to be found in the middle of this spectrum.