Glyph design: V-derived letters ( X W Y A )

s
o
z
i
v

S
I
V

O
Z
H J
U
X W A Y

G Q
C
E F L T
M

D P
K
N

B
R

Just as three letters can be made from the ‘O’, two from the ‘I’, and four from the ‘H’ and ‘Z’, three letters—‘W’, ‘Y’, and ‘A’—can be made from the ‘V’. The capital ‘X’ will also be included since it has many things in common with the ‘V’.

The ‘X’ is constructed just like the ‘V’—take a lowercase ‘x’ and extend its arms and diagonals to the capital line and the baseline. The strokes should intersect at the height of the ‘H’s median. The letterform is very slightly narrower than a proportionally scaled lowercase ‘x’ though. When we embolden the ‘X’, the extra weight on the diagonal goes on the inside, reducing its slope slightly. On the arms, it goes on the outside, increasing the skew between the two arms slightly (else the arms look misaligned).

The ‘W’ is constructed just like its lowercase counterpart—Start with two ‘V’s, overlap them, reduce (or even remove) the middle serif, and compress the letterform slightly.

Glyph design: box capital letters ( E L F T )

s
o
z
i
v

S
I
V

O
Z
H J
U
X W A Y

G Q
C
E F L T
M

D P
K
N

B
R

The box group of capital letters—‘E’, ‘L’, ‘F’, and ‘T’—all have a vertical stem derived from the capital ‘I’ and horizontal arms derived from the ‘Z’. Some—‘E’ and ‘F’—are also divided by a median aligned with the crossbar on the ‘H’. Three of the letters—‘L’, ‘F’, and ‘T’ are degenerate versions of the fourth—the ‘E’. So designing the ‘E’ means we get the other three relatively easily. However ‘E’ is very complex to design, so it helps to draw the ‘L’ first and make the ‘E’ from that.

The ‘L’ takes its stem from the ‘I’, and its arm from the ‘Z’. Experiment with different letter widths to find the best proportions. The joint between the two strokes also benefits from some bracketing on the inside.

Glyph design: I-derived letters ( H J )

s
o
z
i
v

S
I
V

O
Z
H J
U
X W A Y

G Q
C
E F L T
M

D P
K
N

B
R

The ‘I’ gives direct rise to two letters—the ‘H’ and the ‘J’. Both these letters are incredibly straightforward to design.

The ‘H’ is just two capital ‘I’s connected by a crossbar the width of one of the arms on the ‘Z’. The letter, not including serifs, should be about as wide as the ‘Z’ as well, and the crossbar should be located slightly above the letter’s median. As usual, the interior serifs on the letter’s two stems should be shortened slightly.

Glyph design: O-derived letters ( C G Q )

s
o
z
i
v

S
I
V

O
Z
H J
U
X W A Y

G Q
C
E F L T
M

D P
K
N

B
R

From the ‘O’ comes the ‘C’, ‘G’, and ‘Q’. The capital ‘C’ and ‘O’ differ from their lowercase counterparts in that their bowls are virtually identical, while the ‘c’ and ‘o’ have marked differences in curvature and stress. The ‘C’ is produced by taking half an ‘O’ and extending the ends to meet up with beak serifs from the ‘Z’. The bowl is extended to meet those serifs, which depresses the upper and lower left corners of the letter slightly (marked with pink arrows).

It is very common to leave the ‘C’ like that, with two serifs on both ends of its bowl. A minority of typefaces (such as Le Monde Journal) however remove the bottom serif, tapering out the bowl into a finial.

Glyph design: drawing the first capital letters ( I O V Z )

s
o
z
i
v

S
I
V

O
Z
H J
U
X W A Y

G Q
C
E F L T
M

D P
K
N

B
R

So we’re finally up to the capital letters! Luckily, capital letters are much easier to design than their lowercase counterparts. You can get functioning glyphs for a third of the uppercase alphabet with just a day’s work. This is because uppercase letters are much more square and geometric than their lowercase counterparts. There are fewer curves to worry about and the curves that do exist are much easier to handle. Many uppercase letters also look very similar and recycle parts (at least optically), so a few parent letters can give rise to very large swaths of the alphabet.

The most fundamental unit of the capital letters is the vertical stem. That means that the first letter you should design should be the ‘I’.

It makes sense to design capital letters where they would most commonly be used—at the beginning of a word, so that’s typically my approach to designing capitals.

The ‘I’ can be constructed by taking a lowercase ‘i’ and duplicating its bilateral serif. The ‘I’, unlike the ‘i’, is perfectly symmetrical, so make sure the right side of the serif isn’t still shorter than the left side.

Strategies for setting letter spacing: part two

In the last post, we resolved the sidebearings of three letters—‘n’, ‘o’, and ‘v’, each representative of a class of letter shapes. These sidebearings can now be assigned to related characters with congruent sides. The sidebearings of the ‘n’ also work for the ‘m’ and the ‘i’ (but not necessarily letters like ‘l’ which has a taller stem and no head serif on the mean line). Since the left side of the ‘n’ is the same as the left side of the ‘r’, the left sidebearing of the ‘r’ can be taken from the corresponding sidebearing on the ‘n’. The same goes for the right side of the ‘h’, which matches the right side of the ‘n’. In Floribunda the right side of the ‘a’ also matches the ‘n’, but this is not always true.

The sidebearings on the ‘o’ can inform the ‘e’ and ‘c’ (the right sidebearings might need tweaking) and the bowls of the ‘b’, ‘p’, ‘q’, and ‘d’. The ‘v’s sidebearings set the sidebearings of the ‘w’ and the ‘y’.

Strategies for setting letter spacing: part one

At this point, all twenty-six lowercase letters have been drawn and packaged into a font file, but they lack any horizontal metrics, so they all print in their own em squares if you try to type with it.

Text credit: Wikipedia: Sun

We have to set the sidebearings (basically the width) of each letter to get the text to print more like this (again, capital letters and punctuation have been stripped since Floribunda doesn’t contain them yet) :

Floribunda has a complete lowercase alphabet!

Here’s a cute pangram (sentence that contains every letter of the alphabet) typeset in Floribunda (forgive the missing commas!) :

The font file contains no side bearings or kerning—each letter is in a 1 em square, so it’s just if you want to check out the outlines or something. The pangram was typeset with individual letters. Download it here.

Glyph design: the lowercase z

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

Bringing up the end of the lowercase English alphabet, and the lowercase bloc of Floribunda, is the letter ‘z’. The ‘z’ is an incredibly rare letter, the rarest English letter in fact. On average, it only occurs once every 1,350 letters (‘q’ occurs once every thousand letters, and ‘x’ every seven hundred). But while ‘z’, like ‘x’, is rare, it is vastly important because it bridges the gap between the lowercase and uppercase alphabet.

The ‘z’ is unlike any other lowercase letter. It defies the rules of calligraphy—based on the stroke angle, all parts of the ‘z’ should be hairline. But since you can’t have a letter made completely out of hairlines, it’s become a convention to embolden the diagonal (the convention is reversed in italic type). The letter’s two horizontal arms are the most important parts of the letter. No other lowercase letter contains straight horizontal strokes (besides unserifed crossbars like in ‘t’)—the miniscule alphabet always converts such shapes to bowls or arches like in ‘f’ or ‘p’. But these strokes are common in the uppercase alphabet, making ‘z’ a useful base to start constructing letters like ‘E’ or ‘L’. They will also be extremely handy in constructing lowercase cyrillic letters, if we ever get to that.

Components of a lowercase ‘z’

The ‘z’ is not hard to construct. You can get the diagonal of the ‘z’ by reflecting the ‘x’ horizontally. Normally you should never ever reflect a letter in a single axis as it reverses the stroke stress, but we can get away with it with the ‘z’ since its diagonal is already a stress violation anyway. The diagonal is the same length and width as the one in the ‘x’—but the ‘z’ is slightly narrower because it lacks the serifs that come off the diagonals.

Glyph design: the trick to drawing the letter s

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 ‘s’ is considered one of the hardest letters in the alphabet to design. It is utterly unrelated to any other letter we have designed so far. Most people can’t handwrite this letter and produce a passable print rendition.

If you are learning the latin script and are struggling with handwriting this letter, do not despair—most of us don’t have a firm grasp on its construction either. Most neat writers (mostly teenage girls) handprint the letter something like a number ‘2’ reflected vertically and rounded slightly. Some people overexaggerate the hooks of the ‘s’ to the point where it approaches a figure ‘8’, others render the letter like a mirrored ‘z’.

Some common handwritten forms of the letter ‘s’.

 Even worse is when people try and make bubble letter ‘s’s. Except by experienced bubble letterers, one of two results is almost invariably produced.

I won’t dwell on better techniques for bubbling the letter ‘s’. My point is, that most people utterly fail in drawing this letter because they try to freehand it. You can’t blame them—the ‘s’ contains no straight lines and it has no visible geometric basis. But we type designers must be better than that. Here, I’ll show you an easy, relatively painless method for drawing this letter that relies on its hidden geometric structure.

How to deal with font extremas

I don’t know about you, but this is definitely my least favorite font error. If your glyph outlines aren’t constructed in just the right way, fontforge will complain about missing “extremas”. But what are extremas anyway?

An extrema is a special kind of point that helps define the edges of a glyph. The word is Latin—technically a single extrema is called an extremum, with extrema being the plural. But the term has become so common among type designers, that extrema and extremas have become the terms used to describe these points in a glyph outline.

An extrema is just a curve’s minimum or maximum in the xy coordinate plane. This is just like finding the maximum of a parabola or some other curve, except applied to bézier curves.

Each bézier segment of a glyph’s outline (read: each segment between two points, not the entire glyph outline) must be a one-to-one function*—i.e. it has to pass both the horizontal and vertical line tests. A bézier segment in a font shouldn’t change direction in either the x or the y direction—otherwise it should be split into two one-to-one segments. A handy (but not foolproof) way of checking this is looking to see if the curve fits into the rectangle determined by its endpoints (though an ‘s’ shaped curve can pass this test and still not be one-to-one).

The curve on the left is acceptable—it doesn’t change direction in the x or y axis. The curve in the middle folds back on itself, so it needs to be split in two (right).

Why is this a thing? Well apparently it helps with hinting, by letting the renderer know the bounding boxes of the glyph outline. It also makes it easier to measure stems and set sidebearings, since you can measure distances between points instead of vague spots along a curve. But the truth is, most renderers get along fine without any extremas. No vector illustration program requires extremas on its paths. Extremas are just extra points on the ends that help protect glyph outlines, since fonts undergo much more heavy-duty scaling and rasterizing than most other forms of vector art. Think of them as protective bumpers on your letters that keep your font from getting distorted by dumb renderers.

Glyph design: how to draw the looptail g

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 lowercase looptail ‘g’ is perhaps the most poorly understood letter of the alphabet. Its serif form has an extremely intricate architecture that virtually nobody knows how to write these days.

Just like with the ‘a’, there are two accepted ways to write the letter ‘g’. On the left below is the “proper” form, called the looptail or double story ‘g’. The script form (right) is much less common, and is generally only found in sans serif and decorative typefaces (and even then only occasionally). But since it is much easier to draw than the looptail ‘g’, most people handwrite the script ‘ɡ’. In proper serif type, this ‘ɡ’ is exceedingly rare. In fact, the only place this construction is found is as a phonetic glyph, and very few fonts include IPA support.

Linux Libertine is one of the few fonts (commercial or free) that contain the phonetic ‘ɡ’ along with the alphabetic ‘g’

The calligraphic roots of serif type

If you’re new to serif type design, you might be wondering what’s going on with all that thick–thin stroke stuff. For example, why are the sides of an ‘o’ thicker than the top and bottom? The reason serif type has all that stroke contrast is because serif type evolved from broad-nibbed calligraphy, which produces such contrasting lines.

A long time ago, before ballpoint pens, people wrote with what were essentially sticks dipped in ink. But these writing instruments couldn’t be too pointy—or else they would break. So the nibs (writing points) were made wider to give them more strength. This became what is now known as the broad-nibbed calligraphy pen. Though they’ve since been eclipsed by the ballpoint pen, they are still somewhat common and there are many places you can buy them.

Glyph design: the lowercase k

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 ‘k’ is made up of a single ascending stem, and a diagonal arm and leg protruding to the right.

Components of a lowercase letter ‘k’

The left side of this letter is essentially identical to the lowercase ‘l’. Considerable variation exists in the right half of the letter, especially where the arm and leg meet, called the join of the letter. Sometimes, particularly in older style typefaces, the join is an extension of the arm and the leg offshoots from it, other times, the arm and leg are disconnected from the stem and the two parts meet at an invisible point.

Glyph design: the lowercase x

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 lowercase ‘x’ is one of those letters that isn’t hard to make, just tedious. The ‘x’, while seemingly simple, requires numerous (but well documented) optical corrections. You also have to consider the negative space in the letter, something you usually only have to think about with round letters like ‘p’ or ‘e’.

The superficial structure of the letter isn’t complicated. It has a single thick diagonal, crossed optically by two arms, collectively called the letter’s hairline, since it is supposed to represent the hairline thickness of the font.

The ‘x’ isn’t a very common letter. The most abundant English letter, ‘e’, is eighty-five times as common. In a typical page of English text, ‘x’ only occurs once every seven hundred letters, on average. Only ‘q’ and ‘z’ are rarer. But the letter is of great interest to typographers, since it stores a a lot of a typeface’s measurements. The height of the letter determines the optical size of the lowercase letters and sets the mean line of the typeface. This is why font size is sometimes expressed in terms of “x-height”, especially when point size is unreliable. The letter’s four corners (including serifs) roughly form a square in a normal style typeface—if it’s wider than it is tall, the font is extended, if it’s significantly narrower, the font is considered condensed. The width of its arms sets a typeface’s hairline thickness, and its hairline compared to the thickness of its diagonal can be used to measure the stroke contrast.

Components of a lowercase ‘x’

The diagonal of the letter can be made from the diagonals of two ‘v’s. It is important that the serifs of the ‘v’s align exactly to the baseline and the meanline of typeface, or else you will create an ‘x’ that is too tall or too short, which will be very hard to correct later on. The diagonal should be sheared over so that it spans slightly less than the width of the ‘v’.

Glyph design: the lowercase j

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 ‘j’ can be built straight from the ‘i’—in fact, long ago the two letters were one. The only difference is that the ‘j’ has a slightly curved tail descending below the baseline.

Components of a lowercase ‘j’

The top half of the letter is exactly identical to the ‘i’. The bottom half can be made from the hook of an ‘f’, though in most serif type, the two arcs of stem appear very different (in sans serif type, it is common for the ‘j’ to simply be a rotated ‘f’ with a tittle and no crossbar).

Glyph design: the lowercase w and y

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

Just like how you can easily derive ‘p’, ‘d’, and ‘q’ from the ‘b’, and ‘h’, ‘m’, and ‘u’ from the ‘n’, ‘w’ and ‘y’ can be quickly made from the lowercase ‘v’ glyph. Both letters contain the ‘v’ in them, only slightly modified.

Components of a lowercase ‘w’. The ‘w’ is essentially a ligature of two ‘v’s.

The letter ‘w’ can really be thought of as a ligature of two ‘v’s. In fact, in many languages, the name of the letter is “double-v” (English calls the letter “double-u” since when it was invented, ‘u’ and ‘v’ were still the same letter). Because of that, many typefaces render the letter as two slightly overlapping ‘v’s. Like the ‘m’ which is typographically composed of two ‘n’s, the ‘w’ is very slightly compressed (though not to any noticeable extent).

Garamond (left), Sabon (center), and Hoefler (right) all have ‘w’s composed from two ‘v’s.

A few typefaces omit the serif between the ‘v’s, like Minion and Bodoni. Warnock appears to be intermediate. This form generally has much more compression than the ‘vv’ form, usually applied to the outer strokes of the letter.

Glyph design: the lowercase c

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 ‘c’ is deceptively simple. It is a single open curve, and much of the design work on this letter is purely visual so there are few pointers I can give you.

The bottom half of the ‘c’ is almost identical to that of the letter ‘e’. But instead of closing off into a loop, the top of the curve finishes off in a terminal, usually with blobbing. The top left of the letter is often flattened slightly.

Glyph design: the lowercase t

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 ‘t’ seems visually tricky to design, though it is actually one of the easier letters to make. In many sans serif and a few didone typefaces, the entire letter can be derived from the ‘f’ with minimal modification. This is generally not true in transitional and “older” type, though the cross stroke can still be inherited from the ‘f’, and the letter’s finial is easy enough to draw, making the ‘t’ a rather low hanging fruit in terms of type design.

Components of a lowercase ‘t’

The ‘t’ is not a complex letter. It consists of a single vertical stem that terminates in a curved finial extending about as far as its cross stroke does. The finial is almost always somewhat right-skewed (meaning it’s sharpest part lies to the left of the middle of the letter) and except in decorative typefaces, it never has a blob or serif. The shape is often reminiscient of the shoulder of the ‘n’ or ‘u’. The stem of the ‘t’ is crossed by a cross stroke—it is almost always identical to the one found on the ‘f’, though rarely, it lies a fraction of a hairline higher than the cross stroke on the ‘f ’ does. The most interesting part of the ‘t’ is the relation between the cutoff of the stem and the left side of the cross stroke.

The forest and the trees: How to test your font

As I’ve said before, it’s important to periodically combine your glyphs into words and see how they work together. You should already be examining your typeface at the word level. At this point, Floribunda has enough letters that we can also start assembling short test texts. Test texts can be as long as a paragraph or even a page, but for now, we’re just looking for problems at the line level. A few issues I saw right off the bat was that the ‘f’ terminal was a bit too light, and the spur of the ‘a’ too thin.

A test text for Floribunda. Test texts don’t necessarily have to make sense,
they just simulate font usage at the line, paragraph or page level.

I also wasn’t a fan of the bowls on the ‘b’ and derived letters, so I redrew them with fresh curves.

Glyph design: the lowercase r

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

At the most basic level, ‘r’ can be grouped with ‘h’, ‘m’, and ‘u’ as letters that share characteristics with the letter ‘n’. Indeed, in many sans serif typefaces, the ‘r’ is almost made by literally slicing off the right side of an ‘n’. However, particularly in serif type, the ‘r’ is distinct enough from its siblings that it warrants separate treatment.

Components of a lowercase ‘r’.

The stem of the letter is taken straight from the left side of the ‘n’, with little modification. However, the terminal of the ‘r’ (sometimes called an ear, though the term is usually reserved for the thing on the serif ‘g’) is much heavier, and the shoulder much steeper than the corresponding parts of the letter ‘n’. On top of that, finding an attractive shape for the ball terminal on the letter can be a challenge in itself, given the lack of space from the narrow shape of the letter.

Keeping your letters in line

It's very important in type design to make sure all your letters are the same height. Otherwise, subtle irregularities might accumulate, and you might not notice if a letter is getting taller or shorter than it should be. This is why you should set up fontforge guidelines early in your design process.

The most important guideline to set is the meanline. This is the height that most of the lowercase letters should reach to. The meanline should align with the top edge of the lowercase ‘v’ or any other flat-topped lowercase letter. You set the meanline in fontforge by dragging down from the ruler at the top of the glyph window. Make sure you round the guideline to an integer!

You should also set the over and undershoot guidelines—use a round letter like ‘o’ or ‘e’ to determine where it should go.

The round parts of every curved letter—that includes the ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘g’, ‘h’, ‘m’, ‘n’, ‘o’, ‘p’, ‘q’, ‘r’, ‘s’, ‘t’, and ‘u’—should touch these lines. So should any pointy letters like ‘v’ and ‘w’, which should have an undershoot, and any letter with a head serif including ‘i’ and ‘j’, which should have an overshoot. In theory, pointier shapes should under/overshoot more than curved shapes, but the bevel on the vertex of the ‘v’ makes this necessary. However, I do have my sharp head serifs extend three font units beyond the curve overshoot.

You should also put guidelines into place for the ascenders and the descenders, and any other useful heights.