Written by Tim Bones

Copyright © 2017 The Interactive Design Institute

 www.idesigni.co.uk

Disclaimer
No part of this document may be reproduced in any form or by any electronic or
mechanical means, including information storage and retrieval systems, without prior
permission of the publisher and author.

While attempts have been made to verify information contained in this publication, neither
the author nor the publisher assumes any responsibility for errors, omissions,
interpretation or usage of the subject matter herein. This publication contains the opinions
and ideas of its author and is intended for informational purposes only and is meant to be
a general guide. It is not intended, nor should it be treated, as a definitive guide on the
subject, nor should it be regarded as professional advice.

The author and publisher shall in no event be liable or be held responsible for any loss or
other damages incurred from the usage of this publication, or for any problems/concerns
that may arise, and will not be responsible for any loss, claim or action from the
information contained in this e-book.

Every effort has been made to correctly reference all artist work within this e-book.
This e-book is not for re-print, or re-sale, for either personal, educational,
or commercial purposes.

2
 Covering everything from the basics, to all things complex

1 2
Typeface design Terminology & Anatomy

3 4
Types of Typefaces Technical Options

5 6
Understanding Typeface Design Glossary, Further Reading,
References

3
A typeface is “the collection of thousands of years of
collective human social, technological and economic
history, combined with the passion, skill, experience
and personal history of its lone creator.” (Earls, 2002)

4
1
An Introduction to Typeface Design Getting Started

If you’re a fan of type and lettering and feel When you begin designing a new typeface, the
up for a considerable yet potentially rewarding Internet, along with old or out of print books, can
design challenge, then you might consider provide a good starting point for your research.
designing a typeface. Then, should you want a Don’t feel obliged to sit at your desk during this
further challenge, you might also consider ways process. Get yourself outside and look out for
of digitising your work. There are a number of sources of potential inspiration and keep a visual
ways that you can approach this—some being record of the items that inspire you. Importantly,
far easier than others. Whatever approach you consider the function of the fonts that interest
decide to take, a certain amount of patience and you. What is it that you think the designer set
understanding will go a long way. out to do with the type? Is it purely decorative
or does it serve a particular function, such as
As an art form and a technical, engineering assisting with way finding or traffic signs? With
process, typeface design has, in recent years, that in mind, consider what you want it to do.
grown exponentially. A process that has You should keep in mind the maxim,
traditionally been the esoteric knowledge of the “form follows function”.
few, it continues to grow and diversify. Opinions
regarding the expanding growth of typeface Once you’ve established what the typeface is
design have been met with conflicting views. for, you can begin. If you’re new to the process,
The late English lettering artist and designer, you’ll want to keep things simple. Typeface design
Michael Harvey, expressed his dislike for the can be a complex enough task without making
“confusing variety of styles” that add to the it more difficult than it needs to be. Perhaps you
“over-crowded repertoire” of new typeface should start with a simple display face. Depending
designs and the flourishing eccentricity and upon the requirements of a brief, some designers
‘crumbling’ standards of design. However, the spend months (even years!) perfecting their work,

1
argument about the choice or surplus of available so it’s a task that can easily grow in scale.
fonts (depending upon your stance), is perhaps
better summed up by Peter Bil’ak in his article Some designers begin working by drawing
“We don’t need new fonts…”. letters, keeping sketchbooks and transferring
these designs to the computer. Other designers
In his piece, Bil’ak states: work directly within a digital environment. For
the latter, FontStruct is an ideal place to begin,
“There are typefaces which haven’t been made being an easy to use, free, online resource, but
yet and which we need. Type that reacts to our we will address technological resources at a later
present reality rather than being constrained by point.
past conventions.... It is time to think about why
we design type, not just how we design it.” On finding inspiration, the French typeface
designer Jean-Francois Porchez suggests
we must stand on the shoulders of giants for
inspiration and knowledge, stating:

“Each new typeface cannot live without its

predecessors – all of them form one large family
and are connected and influenced by each other.
If Claude Garamond cut a splendid type, then it’s
because he studied Italian typefaces and tried his
best to improve upon them…”

5
“There are typefaces which haven’t been made
yet and which we need. Type that reacts to our
present reality rather than being constrained by
past conventions... It is time to think about why
we design type, not just how we design it.”

- Peter Biľak

8
2
Even if you are an experienced calligrapher Where to Start?
or lettering artist, making a typeface is an
altogether different process, and before A good place to start might be with what is
you start it’s worth becoming familiar with known as a display face. Display faces are those
some fundamental typographic concepts and used for headings and tend to be used at a larger
terminology. size than body type. However, before proceeding,
you should familiarise yourself with some of the
You have probably heard of the terms fonts and fundamental concepts of typography along with
typefaces, and these two terms are often used its associated terminology.
interchangeably as there seems little harm in
doing so. However, strictly speaking, there is a Letterform Anatomy
distinct difference in meaning between the two.
Start by getting to know the differences
A typeface is essentially the design of an alphabet between your cap heights and your x-heights
and its family, such as Gill Sans Regular, Bold and and how to tell your serifs from your sans serifs.
Italic in its various sizes (12 point, for example), Whatever you choose to design, it will need to be
whereas a font or “fount” (UK) is the physical consistently well styled and proportioned.
collection of a typeface and the means by which
it is rendered. For example, either the digital or Familiarise yourself with the information
metal version of Gill Sans Bold 14 point is a font. contained within this chart on the following page:

Another simple example of these differences

is stencil lettering and the means by which it is
produced. The design of the letter shapes on the
stencil is the typeface and the plastic stencil used
to reproduce the design is essentially the font.

9
Ascender Height
Cap Height
1
X-Height

3
Baseline
2 4

8
X-Height
9
10
Baseline
11
Descender Line
 1. Apex
2. Serif
3. Bowl
4. Finial
5. Counter
6. Descender
7. Ascender
8. Bar
9. Open-counter
10. Stem
11. Link
12. Loop
13. Ear
14. Shoulder
15. Tail

14

13 5

12
15
“No other design discipline requires so much learning
and training as fontography, and by no other aspect
can amateurs be so easily distinguished from
professionals. To be font literate, a designer has to
study the history and the principles of font design.”

- Dmitry Kirsanov

12
3
Classifications Humanist, Old Style or Venetian

Obviously type comes in thousands of shape Humanist typefaces echoed the letter shapes
variations, and as well as Serifs and Sans Serifs, formed by broad nibbed pens.
there are specific classifications for these
variations. One such classification system is that Transitional
created by Maximilien Vox in 1954. Within the
current version of the Vox System there are nine Sharing some of the characteristics of both the
groups identified as follows: humanist and modern faces, transitional faces
have medium contrast between the thick and
thin parts of the letters.
1. Classicals
Modern or Didone
• Humanist
• Garalde These typefaces exhibit high contrasts between
• Transitional thicknesses. The serifs are referred to as hairlines
due to their fineness.
2. Moderns
Egyptian
• 2.1 Didone
• 2.2 Mechanistic Traditionally, Egyptian or slab serif typefaces
• 2.3 Lineal were quite heavy with completely squared or
• 2.3.1 Grotesque bracketed serifs.
• 2.3.2 Neo-grotesque
• 2.3.3 Geometric Examples for you to consider:
• 2.3.4 Humanist

3. Calligraphics

• 3.1 Glyphic
• 3.2 Script
• 3.3 Graphic
• 3.4 Blackletter
• 3.5 Gaelic

Although this system encompasses most of the

major categories of type, Cheng (2002) has
noted that some of the many typefaces now in
existence defy classification.

13
“I do not think of type as something that should be
readable. It should be beautiful.”
- Ed Benguiat

14
4
Having decided upon the purpose of your design FontStruct allows for the design to take place
and having invested a considerable amount of within a web browser, meaning that there’s
time drawing letters and trying out different no requirement to download and install any
variations and combinations, you may wish to software. It is incredibly easy to use, and both
attempt to digitise your typeface, effectively building and editing are simple. Because of the
making a font. modular method of construction there are no
Bézier curves to manage, which is an easy way to
An experienced designer will probably concur begin.
that this part of the process can be as involved—
if not more so—than the initial designing of the Once you have completed your design, you
typeface, particularly if you are striving to perfect can download your font and install it onto your
the numerous intricacies of the working font. computer. You can also decide whether or
not to keep the font private or share it via the
Let us assume that, as a beginner, you are FontStruct website. The sharing of fonts within
possibly striving to achieve a basic display face of the application means that fellow designers can
some kind, at the very least. You might consider modify each other’s designs, making this a truly
making a quirky or decorative typeface. Either social design experience.
way it might be wise to keep in mind the KISS
principle of design, meaning ‘keep it simple, If you want to create typeface that is altogether
stupid’. In other words, don’t try to achieve too more sophisticated, then there are more
much too soon. powerful and complex editors such as Fontlab,
and the more recently available, Glyphs. Fontlab
There are several technological choices that you has been the serious type designer’s tool for
can make when approaching font production and a long time, but now has competition from
these will largely be determined by your needs applications such as Glyphs which according to
and your technical experience. its creator is a “smart and simple approach [that]
helps you draw new typefaces, modify existing
There is no single definitive design process, and fonts, and sculpt your letterforms hassle-free.”
typeface designers approach this somewhat Unlike some of its competitors, Glyphs has a
esoteric process in different ways. Some user friendly bank of tutorials and resources,
designers work exclusively from screen, without including an excellent handbook that will help
sketching or drawing their designs onto paper, the novice get off to a good start and develop an
whereas some will scan their drawings and bring understanding of many of the refining processes.
these either into font editing software or firstly Unlike FontStruct, Glyphs allows you to draw
into Illustrator to be worked on later within a font and edit using Bézier curves, giving you the
editor. opportunity to create far more precise shapes.

If you’re striving to design a display face then

you might consider starting out by using what is
almost certainly the best beginners’ option for
getting quick results: Fontstruct.

Free and simple to use, Fontstruct allows you

to use a variety of shaped building blocks in order
to form a simple, modular typeface.
Once complete, you can then share,
download and use the fonts.

15
An exciting new development is Prototypo.
Prototypo appears to be a sophisticated browser
based tool which is available to download in
beta form.

Prototypo

Of course, if you’re familiar with Adobe Illustrator

(and particularly its pen tool) you can design your
letterforms with it. But in order to turn these
into working fonts, you’d need to bring them into
some font editing software and continue working
on them to perfect their shaping and spacing.
If you design a typeface using Illustrator you must
remember to work in points as this is the true
measure of type.

There are several other font editors; some are

designed for use on PC and others for Mac such
as RoboFont.

If you’re looking for a way of digitising your

handwriting, then there’s MyScriptFont.com
which is a free online tool and quite a fun way of
generating a font with a personal touch.

Whatever approach you decide to explore, it is

good to keep in mind that tools are simply tools
and that type design and typography are steeped
in centuries of convention. As designer and
author David Jury says, “Rules can be broken but
never ignored.”

16
Glyphs

Fontsruct
“Since typography is a communicaton method
that utilizes a gathering of related subjects and
methodologies that includes sociology, linguistics,
psychology, aesthetics, and so much more – we
aim to educate that there is no single approach
within typography that applies to everything.”

- Shelley Gruendler

18
5
We have touched upon some of the fundamental Start with the basics.
aspects of typeface design, along with a brief
look at some of the type design tools available. To Take time to develop sensitivity towards letter
conclude, here are some final points to consider: shapes. When designing letters, don’t just
consider the main form of the letter shapes as
Read, read, read. standalone designs. Instead, consider also the
spatial relationship between other letters as well
If you’re really keen to develop an as the spaces inside of the letters (the counters
understanding of type design, be prepared to and apertures).
learn from those with experience. What has in
the past been a fairly enigmatic discipline has Never steal someone else’s design.
become a more open and transparent activity
with many people having a go at creating their Tweaking someone else’s design in an attempt
own designs and sharing their knowledge. to pass it off as your own is unethical and if it
Scour books and investigate the many discussion breaches copyright law, it’s illegal. There are many
threads in typography forums such as those at observant type aficionados who are quick to spot
typedrawers.com. Specialist libraries are few, a plagiarised font!
but places such as the St. Bride Library in London
house an enormous collection of books, type Enjoy it!
specimens and print artefacts. However,
if this is not an option, the reading and Leave the stress to the professionals and simply
references provided below should get you have fun learning about letters as you play with
off to a good start. the possibilities. Good luck.

Draw, or at least doodle, regularly.

You don’t have to have great handwriting or be

an accomplished calligrapher, however, drawing
does enable the immediate conveying of ideas as
well as the development of sensitivity as to how
shapes and forms interact in relation to each
other. Use whatever you have available, be it
scraps of paper, napkins or old packaging. Ideally,
have a notebook or journal that you can keep
with you and utilise as soon as inspiration strikes.
A graphics tablet can be a good investment too,
as this allows for greater
freedom and control than a mouse.

19
20
21
The following are some of the key terms that
pertain to typeface design and typography.

22
6
 Aperture Ascender

An opening of negative space within a letter such as that The part of a letter that extends above the x-height.
within the letter ‘U’ or that within the lower half of the Examples of letters with ascenders include ‘b’, ‘d’ and ‘h’
letter ‘e’

Baseline Body Type

The invisible line on which type sits Type that forms a main body of text.
(As opposed to a ‘display’ face)

Counter Cursive

A closed space, or partially closed space within a glyph Letters that join together as in
such as that within the letter ‘d’ or the number 8 scripted handwriting

Descender Diacritics

The part of a letter that extends below the baseline. Appearing either above or below a letter, diacritical
Examples of letters with ascenders include ‘p’ and ‘q’ marks indicate a change in pronunciation. Examples of
diacritical marks include the acute (é) and a circumflex
(ê)

Display Type Fount (archaic UK) Font (US)

Type that is generally of a large size. Often this can be The physical means by which a typeface is applied or
easily read at a distance or used in headings. rendered. This normally takes the form of either a digital
or metal set of letters and glyphs. Example: Gill Sans
Light 10pt

Glyph Hinting

A symbol or character Part of the type design process whereby type is

lined up against a pixel grid

23
 Italic Kerning

A sloping type based on cursive handwriting. The adjustment of space between two letters

Legibility Ligatures

“A measure of a type’s ability to be read under normal A glyph that is formed by joining two or more glyphs
reading conditions.” (White, 2004)

Majuscules Minuscules

Capital or uppercase letters Lowercase letters

Multiple Mastering Opentype

A technological facility that allows for the creation A font file format that works across platforms.
of a variety of font weights from one master It generally has the suffix .otf

Pica (Py) Point (Pt)

Consisting of 12 points, a pica is A single unit of a measure of type.

typographic measure expressed. There a 12 points to a pica.

Readability Serif

“A measure of the type’s ability to attract and hold a A small stroke or addition to the end of letter or glyph
reader’s interest. Increasing readability often causes a stroke. These come in a variety of shapes and styles
reduction in legibility…” (White, 2004) such as hairline, slab, bracketed and wedge.

24
 Sans Serif Sidebearings

Type that lacks the addition of serifs. This term refers to the spaces either side of a glyph.

Swash True Type Font

An added flourish or embellishment such as a or .ttf is a forerunner of the Opentype format.

lengthened tail or exaggerated, decorative serif.

Tracking Typeface

The adjustment of space between The design of a set of an alphabet, numbers,

multiple letters or tracts of text. punctuation, etc.

Tail Terminal

A descending, often extended stroke the generally runs The end of a stroke without a serif.
from left to right such as that of the letter ‘Q’ Example of a stylised version is the ball terminal

Weight X-Height

Refers to the relative density and stroke widths The height of a given lowercase ‘x’
of a given typeface, such as thin, regular, bold,
extra bold, etc.

25
BOOKS WEB

Bringhurst, R., The Elements of Typographic Blokland, E van., Value of Type

Style
Briem, G., Notes on Type Design
A seminal typographic text, Bringhurst’s book is
a thorough and expansive wealth of typographic De Gregorio, J.P., Vector Drawing
information and is ideal for both the beginner as
well as the advanced practitioner. De Gregorio, J.P., Vector Drawing Mistakes

Cheng, K., Designing Type Shaw, P., Ten Simple Rules for Researching
Letterforms
Cheng’s book is an incredibly useful resource.
This is not a ‘how to book’ but is a great Stössinger, N., Sketching Out of My Comfort
reference for understanding the structure and Zone: A Type Design Experiment
systems of type. Highly illustrated throughout.
On drawing Type by TypeCooker.com
Earls, D., Design Typefaces

Harvey, M., Lettering Design FORUMS

Heller. S, Typography Sketchbooks http://typedrawers.com/ – “Typedrawers is a

forum where fellow typophiles can gather to
A compendium of typographic designers’ discuss typography.”
sketchbooks.

White, A., Thinking in Type: The Practical GAMES

Philosophy of Typography
Kerntype - http://type.method.ac/
Jury, D., About Face: Reviving the Rules of
Typography Shapetype - http://shape.method.ac/

MAGAZINES

Font
A free, online magazine produced by Fontshop

Baseline Magazine

26
PAGES 6-7 PAGE 21

Duerer Underweysung der Messung A Specimen Sheet of typefaces and languages,

131, 132 and 139 1728
By Albrecht Dürer By William Caslon, Public Domain
SLUB Dresden, Public Domain https://commons.wikimedia.org/w/index.
https://commons.wikimedia.org/ php?curid=391754
wiki/Category:Font_design_by_
Albrecht_D%C3%BCrer
PAGE 27

PAGE 17 ‘Mitarbeiter der Druckerei Offizin Haag-Drugulin’

Translation: ‘Employees of Printing Office Haag-
Glyphs Font Design Software Screenshot Drugulin’
https://www.tdc.org/event/designing-typefaces- By Deutsche Fotothek, CC BY-SA 3.0 de
with-glyphs-from-beginner-to-pro/ https://commons.wikimedia.org/w/index.
php?curid=6543777

Bara Dudova, Fontshop Fontstruct: Creating Wood letterpress blocks

Your Own Typoghraphy. By Michele M. F.
Flickr: 4K Retina resolution wallpaper 16:10 -
Http://baradudova.com/blog/fontstruct-create-
Wood letterpress, CC BY-SA 2.0,
your-own-typoghraphy/
https://commons.wikimedia.org/w/index.
php?curid=29874384
PAGE 20

Typography Specimens
All available from Wikimedia Commons
Futura (for example)
By Sherbyte - Own work, Public Domain,
https://commons.wikimedia.org/w/index.
php?curid=11577652

28
www.idesigni.co.uk