Graphic Design
Create Your
Own Font
Summary Notes
Contents
3 Lesson outcomes
3 Introduction
3 Typography anatomy
8 Did you know?
8 Font designers
10 Font formats
12 Demo: Font creation in Fontself
and Illustrator
13 References
GRAPHIC DESIGN
Lesson outcomes
By the end of this lesson, you should be able to:
• Recap on typography terminology
• Define a font designer
• Identify the different font formats
• Create a font from scratch
Practical lesson outcome:
Create your own typeface using either Fontself or any of the other font designing software you were introduced to.
Introduction
Typography is the term used to describe the art of combining letters, numbers and punctuation to form a piece of writing.
With the advent of the digital age, we can even go as far and change the font of the type on your computer or digital
device. Technically, without realising it, you have been designing with typography all along. Our lesson today will not only
include working with type, but we will take it one step further: you will learn to create your own typeface.
Todays quote, by Kate Moross, British illustrator known for their flamboyant hand lettering and vibrant use of colours who
contributed designs for brands like Vogue and Cadburys stated that “The key to great ideas is not having them, it is
executing them. And great ideas come from problems. As designers we call problems, briefs and we call reactions to
problems, concepts.”
Don’t see a problem as an obstacle but see it as an opportunity to create amazing concepts and ideas.
To be honest, this is actually a ground-breaking lesson as you will learn some concepts that have only recently been
introduced to the graphic design industry.
Based on the knowledge we have gained so far, we will learn yet another skill. But before we get there, we need to recap
on the knowledge learnt so far in this course.
I will move over to investigate what it means to be a font designer and also mention some font designing software that you
can make use of.
Did you know, as with raster images that can be saved in a variety of formats from jpg, bmp to png, so too can we create
fonts in. I will list the most common font formats and briefly explain them as well.
Finally, ending off with creating our own typeface! We will be making use of Adobe Illustrator with an additional extension
that I have installed called Fontself. I will give you details on installing fontself.
Typography anatomy
Anatomy of Typography
GRAPHIC DESIGN
The height of all lowercase letters is known as the X-height. This is technically the distance between the Baseline, which is
the line on which all letters rest as well as the X-line which indicates the top of all lowercase letters. The x-line is aka the
mean line.
The cap height is the height of all capital letters
The typeface in which “anatomy” is typed in is known as Sans serif and the word Typography is typed in a Serif typeface.
The difference between the two is that sans serif typefaces do not have extensions at the end of the letters and serifs have
extensions which creates a more traditional feel.
The distance from one baseline to the next is known as leading, which we discussed in module 1 if you can recall.
As soon as a lowercase letter descends below the baseline, it is called a descender. And if a lowercase letter extends above
the x-line, it is known as an ascender.
The word of is typed in italics which is a slanted version of a regular typeface.
The horizontal bar that we get in certain letters like the capital H, and lowercase t is known as a crossbar.
The counter is the enclosed or partially enclosed round or curved negative area of some letters like the d, o or s.
The stress refers to the angle of letters, where the letter is thinner in some parts. This is most obvious in the letter “o”. In
this example, this specific typeface has a vertical stress as the angle is at 90°.
The stoke on top of a DOUBLE STOREY lowercase G is known as an ear and this is also the only letter to have an ear.
You would have noticed that there are two ways to write a lowercase g an a. The one example is know as the double story
G and A and the other is the simpler, standard way of writing a g and a.
Anatomy of typography
The line at the bottom of an upper case Q is known as the tail.
The stroke on the top right of the letter k, either upper or lower case, a v and even an upper case E is known as an arm. So,
if this is an arm, what would the lower right stroke on the letter k be? That’s right, it is known as a leg. Can you guess
which other letters have legs? An uppercase R.
The curved part on the lower case n, m and h is known as a shoulder.
The curved part on the letter s, either upper or lower case is known as the spine
GRAPHIC DESIGN
A terminal is when a letter doesn’t have a serif – the end of the stroke is then called a terminal like in the lower case t, r & c.
A swash is a fancy decorative terminal in serif and upper case letters like on this B for example.
The bowl is the curved enclosed stroke on letters like the under case d, b, o as well as uppercase D B and O.
The curved enclosed space on the lower case e is known as an eye and this is also the only letter to have an eye.
Do you know what? This is not even close to breaking apart the letters in a font but at least you have a good knowledge on
the anatomy of typography.
More anatomy of typography
Typeface categories
We have four main font categories. Serif and Sans serif which you were introduced to in the previous slide. We have display
typefaces and also Script.
Typeface categories
Serif typefaces convey a traditional sense and is normally used for body copy in printed documents due to its ease of
readability when printed.
Body copy should be between 8 – 10pt & should be effortless to read. A lot of these typefaces have been around for 100’s
of years because they simply just work.
Examples include Garamond as well as Baskerville.
Under serif typefaces, we have mainly 4 sub categories, old style, transitional, modern and slab serifs. The main difference
between old style and Transitional typefaces is that old style has a diagonal stress and transitional has either a vertical
stress or no stress at all. Transitional also evolved from old style, making old style the oldest of the serif typefaces.
GRAPHIC DESIGN
Serif typefaces
Sans serifs are a contemporary typeface that was invented long after serif typefaces. The word “sans” literally means
“without” taken from French. This means that sans serif typefaces do not have serifs. Sans serifs can be used for a variety
of applications ranging from headings to body copy in digital documents – if the typeface is not too busy but simple. Sans
serifs come in a variety of different typefaces from basic and simple like Lato, to decorative like Ethnocentric.
Sans serif typefaces
GRAPHIC DESIGN
Display typefaces, like the name implies are used for display or heading purposes and thus not always suitable for body
copy. Display typefaces can have either serifs or not. These typefaces tend to be very detailed and have quite a lot of
“personality” linked to them. A word of caution: Don’t simply use a display or decorative typeface simply because you like
it. Determine whether it speaks with the same voice as the rest of your design does. Also, if it’s not legible, don’t even
consider it. Just because you downloaded it from a font website, does not make it a professional choice.
By choosing the wrong display typeface, you might covey the wrong messages. So it is crucial to understand the mood
and feel a typeface conveys.
Display typefaces
Script typefaces can also be used as display typefaces and are quite formal in appearance. Script typefaces can be used
in only a small amounts of copy as it can exhaust your viewer quite quickly.
Script is simply a term used to refer to a typeface that looks hand written. Like cursive writing, script typeface letters are
normally connected to each other, so when it comes to tracking, don’t add or remove tracking to a connected script. It is
best to leave your tracking on 0. Another word of caution is that script don’t work well in all caps.
Look at the typeface Braisetto below: The first option has too much tracking and the letters look like they don’t belong
together. This is a great example of why tracking should not be added to a script typeface. The 2 nd option is typed in all
caps and is just plain difficult to read, the last option at the bottom is just right. The letters are connected, and it is
actually possible to read it.
Script typefaces
GRAPHIC DESIGN
Did you know?
Did you know that after Steve Jobs dropped out of college to save his parents’ finances, he enrolled for calligraphy
classes as he had a great passion for type. He is responsible for some of the earliest digital fonts. He mostly named
these fonts after his beloved cities. Susan Kare assisted Jobs’ during the creation of these fonts.
Font designers
What is a font designer?
Although font designing falls under the broader spectrum of graphic design, it is quite a field on its own as well. Although
some graphic designers have experience in creating typefaces, I do find that font designing is a very focused field. I do
however feel that it is a field that graphic designers should be exposed to since working with fonts is part of your jobs.
Also, this might be the stepping stone if this is a career you want to consider – then I am glad that I introduced it to you.
Typefaces make out the most of your designs, and of course, there is someone behind creating them.
A font designer or typeface creator is someone who designs, develops and creates fonts and it will literally take hours or
even days to create one font – with glyphs and numbers included. The reason it takes so long, is that they need to
consider every single aspect of the font for every single character they create. From the anatomy as we just recapped, to
the weight, slope, width, the type of font, spacing and many other factors.
Font designers should have an eye for detail, just like graphic designers should and also have a respect for language and
its use. There are literally a legion of font creating software and I won’t mention all of them, but what we will learn in
today’s lesson is designing your own font in Illustrator and then making use of the extension Fontself.
Font designing software
I would like to introduce you to some open-source and paid for software when it comes to creating fonts and typefaces.
There are a lot of font creating software and if you are familiar with using any of the ones I have not mentioned, note that
there is no right or wrong – whatever works for you will be the best option. However, it is also our task as graphic
designers to keep on exploring and learning.
Starting with Fontself, which we will learn in this lesson.
Fontself (Mac & Win)
Fontself is an extension that you can install on either Illustrator or Photoshop. However, I personally prefer the Illustrator
extension as the typeface you create is in vector format of course. Fontself, for me personally is the easiest font designing
software I have used. I personally feel that it will be the easiest to use for most graphic designers familiar with Illustrator
GRAPHIC DESIGN
and Photoshop. This is because you technically create your font in Illustrator or Photoshop and simply export it as a font.
This software is paid for but it is really not very expensive. I will share some details with you later on getting discount on
this package if you are keen on using Fontself.
FontLab is both the name of a company, Fontlab Ltd, Inc. as well as the name of their flagship font editor.
FontLab (Mac & Win)
Since the early 2000s, FontLab has been the dominant software tool for commercial/retail digital font development. It
offers a free 30 day trial and is compatible on both Mac and Windows platforms. If you are able to work with the pen tool
or any type of Bezier tool, you should be well on your way in working with most font designing softwares, including
FontLab.
Fontographer is a font editor for both Mac and Windows.
Fontographer (Mac & Win)
It was originally developed by Altsys but is now owned by FontLab who also creates the FontLab software we just spoke
about. You can design new typefaces and customise existing fonts.
What are the main differences between FontLab and Fontographer?
FontLab is a professional font designing software created for type designers – those people that make a living at designing
fonts. Its interface is not as intuitive as Fontographer, but it is much more powerful.
Fontographer on the other hand is for those who are familiar with working with the pen or Bezier tool. Does anyone
remember the vector editing software Macromedia Freehand? This was the first vector editing software I learne to use
back in the day. If you are familiar with FreeHand, you will remember that when Adobe bought out MacroMedia in the early
2000’s, Adobe technically discontinued Freehand because it was so similar to Illustrator. However, Freehand was
originally developed out of Fontographer, so, if you have FreeHand, Illustrator, InDesign or CorelDraw experience, it will
translate well with Fontographer. This is a superb drawing program for typographers who want to take the next step.
GRAPHIC DESIGN
FontCreator is a simple font editor that allows you to make scalable colour fonts.
FontCreator (Win)
It’s interface is quite user-friendly, so you should not have too much of a problem getting used to it. It only runs on
Windows but you can get a 30 day free trail.
Font Maker is a free Microsoft application where you can use your pen to create a custom font based on the touches of
your own handwriting. It is free to use but will only run on Windows.
MS Font Maker (Win)
FontForge is a free font editor brought to you by a community of fellow type lovers.
Font forge (Mac & Win)
You can actually donate to support the project financially. It is available for Mac and Windows. FontForge allows you to
create and modify postscript, truetype and opentype fonts. You can save fonts in many different outline formats, and
generate bitmaps.
Font formats
You would have noticed that I mentioned some of these applications are limited in the format they are able to export
typefaces. Allow me to explain to you the different formats you can save typefaces in. Just like we have a variety of vector
formats ranging from ai, eps, svg (scalable vector graphics) or even cdr (CorelDraw) files.
Font file types
Of the more common file types as well as the format we will save our font today in is the OpenType font format. OpenType
is the evolution of TrueType and is compatible with most devices and easy to install. It makes room for all those extra
swashes and alternates, so you have some freedom to design when saving your fonts in this format.
GRAPHIC DESIGN
TrueType fonts are the standard typefaces created by Apple and Microsoft. Like OTF’s, they are accessible almost
anywhere but have some limitations as to what you can do with them, hence, OTF’s were born.
You should be familiar with SVG files, as these are simply vector file formats. These fonts are suitable for web and is
unfortunately not installable to your system like otf’s and tff’s. Exactly like you would use any vector file for that matter.
The embedded opentype is actually not very usable – they are a compact version of otfs. It is mostly meant for web and
only compatible with Internet Explorer. You can ignore this type of font format as you won’t be able to do much with it.
Woff and woff 2 files are technically otf files with extra information and compressed data, making them load faster. They
are created for the web mostly and will not work in graphic software like Illustrator.
Have you ever realised that fonts are normally only one colour, unless you change the colour of each character? What I
mean is that you don’t see a multi-coloured font, letters consisting of more than one colour. It is either black, green or red.
Well, things are about to change drastically within the design industry! Being a relatively new format to explore, the
opentype-svg format also known as a colour font allows your font to have a variety of different colours, gradients and even
animation!
Colour font created in Fontself
Fontself, the extension that we will explore a bit later is actually able to create these files and I’m proud to say that this
course is one of the first to explore colour fonts! The only downfall to this format is because it is so new, it is not
compatible with a lot of applications. You will need to have Ill or PS CC2017 or later, Firefox 32 and later is able to view this
format as well as Microsoft Edge 10th Anniversary edition and newer. So, if you create a colour font, and want to use it in
for example MS Word or PPT, it will convert to a solid colour.
Working with Fontself
Our demo today entails working with Fontself, which is available for both Mac and Windows. We will create our font in
Adobe Illustrator and then simply load the font in the Fontself extension. All you will then do is save it as an otf file format.
If your font however consists of any characteristics of a colour font, Fontself will identify these features and save your font
as an OpenType-svg file. You will need to purchase Fontself. This extension is definitely worthwhile if you are interested in
font creation.
GRAPHIC DESIGN
Demo: Font creation in Fontself & Illustrator
Having a thorough knowledge on typography terms will assist you when it comes to creating your own font. With the help
of these terms and formats, we are able to break down the parts of a font and this in return allows us to understand the
anatomy as well as other features of individual typefaces.
Fontself demo (please refer to video lesson)
GRAPHIC DESIGN
References
• Barnard, I, 2017, 7 WAYS to START MAKING your own FONTS! Accessed on YouTube from
https://www.youtube.com/watch?v=1dWsDSmnyrM
• Cass, J., 2008, What is a Font Flag? What is a Font Speciment Sheet? Accessed from
https://justcreative.com/2008/03/17/what-is-a-font-flags-specimen-sheets/
• FontForge, 2020, Download FontForge, Accessed from https://fontforge.org/en-US/downloads
• FontLab, 2020, FontLab 7, Accessed from https://www.fontlab.com/font-editor/fontlab/
• FontLab, 2020, Fontographer 5, Accessed from https://www.fontlab.com/font-editor/fontographer/
• Fontself, 2020, The easiest way to make your own fonts, Accessed from https://www.fontself.com/
• Franklin, S, 2019, The 6 Best Sites for Creating Your Own Font, Accessed from
https://www.arcstone.com/blog/the-6-best-sites-for-creating-your-own-font
• Gruber, J, 2003, Anti-Anti-Aliasing, Accessed from https://daringfireball.net/2003/03/anti-anti-aliasing
• High-logic, n.d., Download FontCreator, Accessed from https://www.high-logic.com/font-
editor/fontcreator/download
• Microsoft, 2020, Microsoft Font Maker, Accessed from https://www.microsoft.com/en-za/p/microsoft-
font-maker/9n9209f8s3vc?activetab=pivot:overviewtab
• Velarde, O., n.d., A visual guide to the anatomy of Typography, Accessed from
https://visme.co/blog/type-anatomy/
GRAPHIC DESIGN
