The Ultimate Guide on How to Join the Newsle

Subscribe to our weekl

Create a Font
full of useful tips, techn
goodies.

email address
By Jake Rocheleau July 27, 2015 In Design

Every digital typeface from free to a $1,000 font pack goes through a similar design process.
Its rigorous for a beginner and does require an understanding of foundational typographic
principles. But for what its worth, learning how to create a font from scratch is one of the
most ful lling creative endeavors in digital design.

Professional font design takes years to master, but this shouldnt dissuade you from learning
the process. Once you understand the steps needed to create a new font you may be Trending this mo
surprised how easily they can be replicated.
30+ Outstand
Lightroom Tu
This guide is meant for hobbyists and typographers who want to get into the world of font
design. Bear in mind I wont be covering speci c techniques in font creation software, but Appetizing an
rather the steps necessary to go from initial idea to completed font. At some point you will Delicious Wo
Restaurant T
need a font creation program and Ill cover the most popular choices to guide you along the
10+ Top Food
way. Elegant Desig
Hungry For M
Font Fundamentals How to Borro
from a Websi
Its imperative that you understand how typography is structured before you start designing Downright C
characters. The incipient design phase requires knowledge of terms like baseline and x- Graphic Desi
height. If youre unfamiliar with these terms please skim this typographic glossary published Having Fun W

by Codrops.
30+ Only-Tex
Inspiration
Here are the most important things you need to know:
25 Free Vinta
Baseline: Where all the letters sit. Think of this like a shelf where the bottom of each
letter should rest.
Overhang: Rounded bottoms of letters like O and B which dip just below the baseline. iStock Promo
2017
X-Height: A line delineating the height of most lowercase letters(notably the letter
x). 5,000+ Free P
Cap Height: A line delineating the height of most capital letters. Gradients for

Ascender Height: Often resting above the cap height, the ascender height limits the
45+ Stunning
very tip of lowercase letters such as k. WordPress L
Themes
 Descender Height: The length of descending marks from characters like y and q.

Rs.425 Rs.79 Rs.360

Rs.999 Rs.37,699 Rs.1,135

It helps to know other terms like nial and ligature, but these are admittedly useful in more
Popular WordPr
advanced typefaces. When just getting started you mostly need to understand how your
letters should be organized in a grid system. WordPress B

Responsive W
Portfolio The

WordPress P
Themes

WordPress e
Themes

WordPress R

At rst glance this stu will be confusing. But to design fonts you really need to love &
understand typography. The best way to learn is diving right in to see what you can make.

More Design Ins

Ecommerce W

Design Portfo

One-Page Po

Every professional typographer recognizes the importance of paper & pencil(or pen). The Design Agenc
very rst step to creating a new font is drawing out your letterforms. If you dont have much
prowess in the way of drawing thats okay, but its highly recommended that you develop Church Webs

some handwriting & drawing capabilities.

Non-Pro t W
Le erform Sketching
Most professional-quality fonts include a standard character map plus alternative styles like
Educational W
italic, bold, and small caps. Its unlikely that youd have the time for all this work so instead
focus on the basics.

Avaya Oceana
Experience is Everything

Customer Service Across Every

Industry. Learn More Today!

avaya.com

Start with pencil & paper by drawing a simple baseline grid. Use a ruler to make perfectly
straight lines and measure dimensions proportionally. There is no exact rulebook for
relationships between x-height and cap height, so youll need to use your best judgement.

Take a look at this post nding the measurement of an x-height from pre-drawn letters. All
you need is patience to keep trying di erent ratios until you nd a match that looks good.
Theres a lot of trial-and-error involved but keep in mind this early stage is also the most
important.

Dont be afraid to revise or make drastic changes to the point of starting over from scratch.
Your goal is to eventually create a nal set of characters that can be scanned into the
computer for digitization.

It may help to draw letters on a blank sheet of paper rst. Dont follow any particular grid
just doodle away to nd shapes that you like. Then you can draw out the 26 characters in
uppercase and/or lowercase following the grid to see how they should look.
 Avaya Oceana
Experience is Everything

Customer Service Across Every

Industry. Learn More Today!

avaya.com

If you really dont like sketching then try following this minimalist design guide which
explains how to make a font without a lot of drawing.

Be sure to nish up your letters & numbers with grammar marks like a question mark,
comma, and exclamation point.

From Paper to Vector

Once you have the letterforms sketched out its time to move into the digital realm. If you
dont have a scanner you can get by with photos from your phone, but a scanned copy of your
work is the best way to go.

Youll need to trace these sketches in a font design program and youll want them to be as
close to proportion as possible.

Some designers prefer to trace letters using a vector program like Adobe Illustrator. Others
prefer to jump right into a font creation program like FontForge or FontLab Studio. If your
goal is to create a nal OTF/TTF font le then it may be quicker to start tracing from a font
creation program(more info on these later).

But Adobe Illustrator can be used for a slight degree of automation. Jenn Coyle has a great
post on lettering with Illustrator that explains how to pull your photos into Illustrator and
live trace the letterforms. It is not perfect and you most likely will need to perform some
cleanup.
 Rs.259 Rs.37,699 Rs.360

Rs.1,135 Rs.79 Rs.115

If your goal is to create a vector logo or brand symbol then Illustrator is de nitely the way to
go. Font programs typically arent meant for large-scale vector manipulation. Plus Illustrator
makes it easy to export your work into graphic le formats rather than font les.

Take note that it is possible to use live trace on a font and then copy/paste those vectors into
a font program. It just requires a bit of editing and may turn into a headache.

Those who want to design a full typeface should move ahead to the next section. But if youre
curious to learn more about Illustrators live trace feature or how to convert hand-drawn text
into a vector then check out the following resources:

Lettering in Illustrator
Re-create a Logo from a Scan
Create Illustrated Type from Sketch to Vector
Hand Lettering: How to Vector Your Letterforms
Adobe Illustrator CC Image Tracing Your Typography

Font Creation So ware

Font creation programs have a marketplace of products just like graphic design and photo
editing programs. Youll nd many suggestions online but the same names often pop up time
& time again.

Let me clarify that a font creation program is necessary to make any real usable font.
TTF/OTF les are generated from these programs and theyre an essential part of the
work ow.
 Myntra, Online Shop

Shop for Lifestyle Apparel,

Branded Footwear,
Accessories & more!

If youre new to making fonts youll probably go with a free option like FontForge. Naturally
there are alternatives where most professional type foundries rely on FontLab kinda like
creative agencies rely on Adobe.

Id like to keep this topic simple for beginners, so unless you have a personal preference try
to pick one of the following 3 programs for custom font authoring.

FontForge

The splendiferous open source movement has blessed typographers with the gift of free font
creation. FontForge is completely free and runs on Mac, Windows, and Linux systems.

If youre completely new to type design then FontForge is the best choice for amateur work.
It has every feature you could need and even some advanced methods of glyph manipulation
that youll likely never use. Plus other programs will cost money so if youre new its not
worth sinking dough into a program that you may never use.

Itll take practice to learn FontForge just like nobody opens Photoshop for the rst time and
crafts a perfect photo composite. Youll struggle and probably get frustrated. Use Google to
your advantage.
 Myntra, Online Shop

Shop for Lifestyle Apparel,

Branded Footwear,
Accessories & more!

Theres also a free online guide to FontForge which is very comprehensive.

A search for fontforge tutorials in YouTube may also rear helpful results. The point is you
cant easily learn FontForge on your own but thankfully you dont have to. If you put in the
hours to study this program you will be able to make awesome fonts from scratch.

FontLab Studio

Almost every typographer knows about FontLab and their assortment of programs, the most
notable being FontLab Studio. Professional design agencies & type foundries often rely on
this program given its standing as the most popular type design program on the market.
The biggest downside for new designers is the $650 price tag. If youre familiar with Adobes
pricing then you know design software isnt cheap. At some point it may be worth shelling
out for this premiere program but designing your very rst font probably isnt this point.

A cheaper alternative is FontLab TypeTool which is only $50. It runs on both Windows & OS
X with many similar FontLab features most important being a similar interface. If you learn
TypeTool then youll have an easier time learning FLS if you ever want to spend $600+ on
their top-tier program.

Glyphs App (Mac Only)

The previous two programs support all operating systems which is de nitely advantageous.
But Mac OS X users may want to check out a 3rd option named Glyphs in the Mac App Store.

It follows a di erent interface than FontForge and FontLab which means learning this
program may not transfer well into others. But Glyphs contains all the features youd need to
make a basic(or complex) font from scratch.

New designers should check out Glyphs Mini which costs about $50 for a full license. Its
tailored more towards beginning typographers who want to create a font but dont need all
the advanced features. Take a look at the comparison chart on the Glyphs Mini page to see
how they stack up.

Again this may not be a popular choice since its not supported on any Windows machines.
But OS X users with a taste for adventure may come to know & love Glyphs as their preferred
font creation program.
Building the Typeface
Mark Richardson

How I get my Freelance clients

This is how I get my design clients Let me know if
you have questions!

Each piece of software is very complex and would require its own guide to explain every
feature. Thankfully most of the basics remain familiar across all programs the di erences
lie in the interface & work ow techniques.

For example, FontForge covers Bzier curves which are common to those who understand
Illustrators pen tool. Theres an entire bzier curve guide explaining how this works for
PostScript fonts. If youre new to drawing with curves then try following this great tutorial by
Tuts+ which explains the pen tool step-by-step.

Another style of drawing is Quadratic curves which are mostly used in TrueType fonts. These
can be auto-generated from Bzier curves and as such many designers prefer Bzier. You can
read about these two methods and decide for yourself.

In general its easier to stick with Bezier since its more familiar and follows the same
techniques found in Illustrator/Photoshop.
Each font design program allows you to import scanned photos as background references
and trace the letters to perfection. This is highly recommended but not a perfect solution
because hand-drawn artefacts do not always come out perfect.

The beauty of digital type design is precision. You can(and should) align an x-height along
with other values that best match your font. Sometimes youll deviate from your original
sketch but thats okay. Your ultimate goal is to make a completed font that works as smoothly
as possible.

Leading & Kerning

Space is something youll need to consider while designing your letterforms. Leading refers
to the space between lines of text while kerning refers to the space between individual
letters in a word(similar to text tracking).
Both features are built into fonts and while they are changeable using Photoshops Type
panel, each font needs to have default metrics. If youre completely new to type design then a
lot of this process will be trial-and-error.

Go by other examples and trust your eye. If something looks wrong then its probably wrong.

Individual letter spacing needs to be considered but theres also the potential for ligatures.
Again the FontForge guide covers word spacing and line spacing with incredible detail. There
may also be di erences in weights if you create italic/bold versions of the font.

Kerning and leading are two large topics that require practice and a keen eye to fully
comprehend. The best advice for a new designer is to do your best and trust your gut. If
youre itching to create a new font then you should jump right into the process without
hesitation.

Just dont forget the importance of measuring space, and more speci cally the
kerning/leading attached to your typeface design.

File Types & Export Options

Towards the nal design stage youll want to export your font for testing. This can take many
drafts before completion and requires a lot of exporting.

The two common le types are OTF(OpenType) and TTF(TrueType). Most type designers
feel OTF is a superior choice because it supports more features and more drawing formats.
OTF is newer and generally regarded as better for complex fonts.

But if youre just practicing a simple typeface you wouldnt notice much of a di erence
between TTF & OTF.

As you get more complicated you may run into di erent OTF styles like Std, Pro, and W1G.
These are font varieties used to outline which features are supported in a particular font(ex:
FF Tisa vs FF Tisa Pro). OpenType font varieties are not necessary for beginners since
theyre mostly used by type foundries but it doesnt hurt to have a little background
knowledge.

For any general purpose typeface Id recommend exporting as OpenType. Its a general font
wrapper for PostScript and/or TrueType font glyphs that work on both Mac & PC. If youre
still confused check out Adobes font formats guide.

The export process is di erent with each program and simply takes a bit of research. Since
FontForge is open source they do have a free export guide which covers some basic
di erences and the step-by-step process.

Go Forth and Design

Type design is like most areas of the design world: youll learn best by doing. Of course that
advice can be o -putting when you have no idea where to start, so I hope this guide o ers a
roadmap for typographers & calligraphers of all skill levels.

Designing a masterful typeface requires years of practice but it may take only a couple
weeks to complete your rst font and learn quite a bit from the experience.
For more on fonts, read these articles:
12 Excellent Font Identi er Tools To Speed Up Your WorkFlow
45 Free Retro and Vintage Fonts
32 Fresh Modern Fonts for Cutting Edge Brand Design

Myntra - Best Fashion

Shop for Latest Clothing,
Footwear,Tshirts, Shoes,
trousers & more!

myntra.com/Free-Shipping

BLOG DESIGN CODE BUSINESS SHOP MORE

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my
email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your rst billing cycle on any
Vandelay Premier plan!

Share On Facebook Share On Twi er

Looking for hosting? WPEngine offers secure managed WordPress hosting. Youll get expert WordPress support,
automatic backups, and caching for fast page loads.

Jake Rocheleau
Jake is a writer and user experience designer on the web. He currently
publishes articles related to user experience and user interface design. Find
out more on his website or you can follow his updates on Twitter
@jakerocheleau

Comments are now closed on this post.

You may also like

12 Excellent Font Identier Design Patterns For Pairing

Tools To Speed Up Your Typography Styles On The 20 Best Free Futuristic
WorkFlow Web Fonts To Download

7 Awesome HTML5 Website

A Guide to the Most Loved 32 Fresh Modern Fonts for Development Tools by
and Hated Fonts Cutting Edge Brand Design Adobe

Free Design Resources: Graphic Design Games For Ultimate Guide to Designing
Downloads for Designers Having Fun While Learning Brand Guidelines

About Us Contact Us Terms of Use Privacy Policy Write For Us Aliate Disclosure Copyright Vandelay Design | Proudly Hosted by