Font Creation Tutorial Part..

8/8/2019 Font Creation Tutorial Part..

1/8

English

Catal

Espaol

Check out these articles:

Using dingbat fonts

The WhimbatsCreating the Whimbats

Selected links: typography

Font creation workshop: the basicsFont creation workshop: advanced

High Logic: font software

We also keep an online journal,

called The Typephases

Observatory. Its our blog where

we periodically add some newthoughts, links and whimsical

occurrences. Heres its RSS feed.Find also more ideas and

inspiration in our Specimen book

and the Serving suggestions.

Every graphic designer who uses computers thinks about creating or modifying

fonts, sooner or later: "how do I create my own fonts?" "how can I retouch one of

the fonts I have to better suit my needs?" "Is it difficult?" "will I be able to do it?"

There is something clear: somebody has drawn the fonts we have, either with

traditional tools or with a computer... and some of the designs are clearly based

on handwriting forms.

Contents of this article:

Introduction

What is a digital font

Necessary equipment and WorkflowStarting points for a typeface

Step by step

Scanning

How to trace the contoursCreating the glyphs

The vector shapes: important details

How to generate the fontFont making programs

Resources

Part 2: Advanced techniques and tips

To create a new typeface isn't a particularly difficult task. Indeed, the idea is

very easy to get, and the necessary equipment, very basic . At the worst, we can

regard the process as something more or less laborious, and it requires good

organisation and planning. This guide doesn't aim to be either a complete manual

on fontmaking or a tutorial about the software you will use (there can be plenty

of programs involved -or just one, depending on what you choose.) This is only a

quick, start level, introduction; if you want to achieve optimal results, some

advanced understanding of those programs is recommended. Once you begin to

have more confidence in creating fonts, go on to part two of this workshop.

The best starting point is to study the workflow diagram below. It illustrates thewhole process: which kind of files we will deal with, what programs can be

used. We can follow different paths to get to the same result: a digital font for

the computer, so we can choose the procedure that best fits our equipment,

software and skills.

What is a digital fontA TrueType or a Type 1 font is a group of vectorial drawings. They can be scaled

with no loss of quality. The vectors that describe each character are stored in a

file, which we shall install in order to use the font. In the PC platform, the

TrueType files have a .TTF extension, and the Type 1 files are composed of two

files: a .PFB and a .PFM file. This last file stores the metrics information. In aMac system the file structure is somehow different, but this is a minor

difference: the process of designing a font is pretty much the same, only

choosing another saving option in the last step.

FONTS & DINGBATS APPLICATIONS CUSTOM WORK NOTEPAD STORE

t Creation tutorial part I: the basics - Typephases Design : the notepad http://www.vectoralia.com/typephases/fontcreation1.htm

8 26/08/2010 11:10


2/8

To create a digital font, we only have to 1) draw the shapes and 2) export them

as a .TTF or a .PFB + .PFM file. Well, this sounds like Monthy Python's How to

write a novel! There are plenty of programs that will help us in the first part,

drawing. However, the second part requires more specialized software.

Fortunately, a very common program, CorelDraw, includes a font-export filter.

What is more, the entire process can be completed from within CorelDraw. For

this reason, we will focus the techniques of fontmaking in using a drawing

application such as CorelDraw (and its user's manual includes detailed

information.) The tools these drawing applications include are usually easier touse and more powerful than those in a font-making program, but the fine details

in a font file (kerning, spacing, hinting...) require them.

Necessary equipment and workflow.Apart from the usual requirements for digital graphic design (or course, a

computer, which can be very basic, even an old 486SX PC if you use CorelDraw 3!

and the common programs), we will need:

A scanner.

Even an old b/w scanner will suffice: we don't create the fonts in colour,but as black and white vectors.

Auxiliar drawing programs.

Used to acquire images in the computer, retouch where it's necessary andprepare them for the typeface. Even the Paint app included with Windows

will do, but it is recommended to use a propram with more features:Paintshop Pro, the Gimp, Photoshop, PhotoPaint, PhotoImpact...A recent

version can be overkill: even PSP 4 will be more than enough -that's what

I use.

Programs to convert the image to vector.

This isn't absolutely necessary, but it will help speed the process and

keep it in control. Most designers use CorelTrace or Adobe Streamline as

vector tracer, if the program itself doesn't include this option. The vectorediting programs include Freehand, Xara, Illustrator , and CorelDraw. The

two first have an internal tracing utility. There is a basic (freeware in itsversion 2) vector editing tool, called Mayura Draw that will do, too.

Programs to generate the font file.

Several programs can do this last task. On the one hand, we havededicated solutions, from entry-level shareware programs like Softy or

The font Creation Program (FCP), to full-featured fontmaking professionaltools (Fontographer, FontLab .); on the other hand, there is the special

case of CorelDraw, a swiss blade of a program that will let you export as

a digital font. So, if you already have Corel, this is a good starting pointbefore buying a dedicated program. This isn't a plug: you may love Corel

or hate it, but it's an extremely powerful program that can be found as a

bargain, and it includes many extras (tons of clipart, premium quality

fonts...)

The diagram that follows is a workflow for fontmaking. It considers almost every

option; includes the programs that can be used and the kind of files they will

work with. And you can choose your own itineraries.

Starting

points for a

typefaceFirst, we shall

design the

characters of a

font (the glyphs).

The diagram

shows some of the

possibilities:


8 26/08/2010 11:10


3/8

A drawing onpaper

1.

Every drawing

implement willdo: pencil, ink,

eraser, paper, or

technical tools:ruler, measures,

T-square,

whatever. It canbe our own

handwriting. Then,we will have to

load the file into

our computer. We can draw directly with our painting or drawing program

2.

or even the font-creation program. We can use the mouse, or have better

control with a graphical tablet. Most professional-quality fonts have been

drawn with painstaking detail with a drawing application, using (or not) ascanned template. We can modify another font, or digitalize a traditional

design

3.

But first, we must check all the legal questions, copyrights, and all this stuff. If

it is legally possible, we can use another type design as the basis of our own.There is another interesting possibility: we can recover old designs, and bring to

life (digitally) centuries-old typefaces. There is a good page at the University of

Zaragoza in Spain that explains the recovery of a XVIII century font, the Ibarra

typeface. Their page is a recommended complement of this tutorial.

Step by stepIt isn't easy to detail the fontmaking process, because it isn't a single chain-like

task; it is grid-like, and it is possible to use different programs with different

routes. In order to cover most of the steps, we will follow the longest possible

routine, starting at the top of the workflow diagram, from a sheet of paper with

some letters drawn in, through the final step of generating a font. Of course, anyother route is possible: for example, you could complete the whole task in

CorelDraw or in ScanFont.

Scanning recommendationsThe exact instructions and settings for your

scanner depend on every machine, but there

are some common points. It is better to scan

at 300 dpi or less, and use a sample the

largest the better. For example, characters

with a height of 5 cm. or more (2 inches) will

scan smoothly at 300 dpi. The reason why: ifyou scan small characters at a very high

resolution you will get a lot of noise and a

contour that reflects every irregularity; a

low-rez scan of a big letter will let you

discard the artifacts without affecting the

overall shape, which is what you really want

to use.

Yes, forget your fancy 32 bit-colour, 2400 dpi

scanner. Set it to scan in greyscale, at a

lower resolution (300 dpi or even less if you have big letters.) If you want to

autotrace, this resolution is recommended; if you will trace the contours

yourself, and the scan will only serve as a template, you can scan the drawing at

screen (72 dpi) resolution.

It is often a good idea to apply a subtle blur filter to the resulting greyscale


8 26/08/2010 11:10


4/8

image, and refine it with the contrast and brightness or the levels controls. Use

the gaussian blur option if available, and test it to get a more soft contour. This

will polish the uneven contours and make the next step easier.

When the image is ok, we must save it. Save a greyscale copy (in the native

format of your application, or in a lossless format, such as TIFF, GIF or PNG.)

Then, convert it to bitmap (black and white); toy a little with the "threshold"

parameter to push more or less pixels to black. Use either the BMP or the TIFF

format, and save it. So now we have a bitmap file, like myfont.bmp. It is time

to scan the contours.

How to trace the

contoursIf you examine the workflow

diagram, you will realize that

a number of programs will let

you bring your bitmap file to

the next stage, the vector file

in adobe illustrator or EPS

format. This vector filecontains shapes that are

defined by means of Bzier

curves, mathematical

instructions to place points

and adjust curves and lines to

them. This kind of

geometrically defined curves

are pretty much the same

stuff that makes up a digital font. Read your drawing program documentation

for a detailed description of Bzier curves, or visit some page such as Mike's

Sketchpad or the PostScript section of Luc Devroye's.

Let's see what the tracing step is. You must place anchor points and handles to

define the vector shape, on top of the bitmap image you prepared in the first

part. You can do it manually, but in many cases the autotrace option or a

dedicated autotracing tool will do a good work. If you are lazy and/or the

quality isn't a critical factor, forget the hand tracing and open the autotrace

engine!

When the either the autotrace or manual trace is ready, we must have something

like the figure shown here. The figure has been approximated with more or less

fidelity, by a number of anchor points that define vector shapes. Now we can

save the results as a vector file, in Adobe Illustrator (.AI) or .EPS format. It is

advisable that we use an older version of the AI format (version 5 or lower) to

solve any compatibility issue.

Creating the glyphsNow, open your drawing application, or if you have it, your font-making

application. I will use CorelDraw as an example, because this is what I have, but

you could use any other vector drawing tool, such as Illustrator, Freehand, Xara

or even the humble but postscript-solid Mayura Draw. The process of font

creation in CorelDraw is covered in several other tutorials that you can find on

the net. Nick Curtis, of Nick's Fonts fame, uses it to create his wonderful

typefaces, and he has an article about his techniques (see the links below.)

First, we need a template to place the characters we will export to the font.

The size of the characters must be big enough to test the contours and be sure

they will look good at different point sizes. The recommended size is a 750 x 750

points page. This isn't the standard page in CorelDraw, so you will have to


8 26/08/2010 11:10


5/8

change it. Double-click anywhere on the page and the properties dialog will

show up. Then, place some guides to have consistent baselines, x-heights and so

on. Just make the rulers visible, and drag the top ruler to place a horizontal

guide, or drag the left ruler to place A typical template page should look like

the accompanying picture.

The

template is where you are going to place the AI/EPS files you traced before, or

where you are going to draw the characters from the start. Take advantadge of

the many and easy-to-use tools of your illustration application, and use the

options of copy-paste, scale, unite, split, etc.

One moment now. A complete font has many dozens of characters. If we don't

want to go nuts, it's better to tidy up our working environment. CorelDraw and

Freehand have a multipage option that you can use to place a character in each

page (sharing the same guides in all of them.) Even if you have a multipage file

it may become unmanageable with more than 200 pages; it is better to createseparate files, for example, for lowercase letters, uppercase, numbers and

punctuation and extended characters. In other apps you will have to use some

workaround, for example, prepare a page with groups of characters, with its

own guides, then select them individually to export them to the font file.

Another alternative, that will work even with very basic versions, like CorelDraw

3, is to have files with layers, where you put up your characters separately. Keep

only the rulers and the active layer visibles to work easily.

The vector

shapes: important

detailsCreating the shapes can be

very easy if we autotrace

the image, or if we use

relatively simple shapes

(circles, rectangles) that

we weld, split or modify in

other ways. There are only

a few points that we must remember:

It is better to simplify the contours to the minimum number of anchor

points. If the vector has many nodes, it will be unnecesarily complex -itcould even prevent the font from displaying or printing correctly. Morecomplexity means more memory usage and often a worst quality. Keep in

mind that a shape can be defined with just a few Bzier nodes: for

example, a dot needs only two points. If you have started with a cleanscan, it is more likely that you will have leaner Bezier curves.


8 26/08/2010 11:10


6/8

Each character in the font must be a single path, filled and closed . Ifnecessary, you can use a and composite path. For example, you create a

dot with a single shape, a circle or ellipse; to create an hyphen you need

a solid rectangle.However, to create an "O" you cannot do it with an empty ellipse. The

shape must have a fill. So you use two ellipses, and the smaller one cuts

the hole in the outermost one. And you cannot use intersecting paths: forcertain effects, you must use the "combine" or " create composite path"

option, together with "removing overlap" or welding several shapes into a

single path.There is another detail that can be corrected with some programs, and is

the path direction. Composite paths have specific directions in eachcomponent (clockwise or counterclockwise) and as a rule, they should be

inversed each time that a path contains another path. The outermost path

must be counterclockwise, while the inner paths combined with it shouldhave a clockwise direction. You can read more details about this topic in

an article on how to make fonts in Corel in their site, designer.com (see

the links down in this page.)

How to generate the fontThe process of making single characters yeld the single or combined paths that

will make it to the next and last phase, generating the font file.

In CorelDraw, select one character at a time, go to the File > Export menu, and

choose Export as... then TrueType or Type 1, depending on the kind of font you

want to generate. Caution: You must check the box "only selected" in the export

dialog box. The following box will appear:

Here you

type the

name of

the font,

check the

box if youare

creating a

Symbol

font, and

leave the

rest at their default values. When you press "Accept", another dialog box pops

up, this time prompting you to select the character that corresponds to the

shape-s you are exporting. In this example, we must find the ! character in the

central column, and select it:

Finally, we press OK in this dialog and we can repeat the process for the rest of

the characters.


8 26/08/2010 11:10


7/8

So, this is the way people creates fonts! This is boring as hell, isn't it? Yes, and

even with the Big Daddy of Font creators, Fontographer, you create the

characters one at a time, and the process is more or less the same as we have

explained above. So take it easy. Go get yourself a good coffee mug, put some

music and et to work. You can do it in several sessions if you get really bored.

But in the end we will have our own font creation, something we can share with

other people and -who knows- even sell. When the font is complete, we only

need to install it to the computer and start using it.

Font making programsCorelDraw can generate fonts, but it proves very limited when it comes to define

most parameters of the font. It is good to create symbol, dingbat or illustration

fonts, but if spacing, kerning, and hinting is critical you must use a dedicated

solution to create and edit fonts.

Most font editing programs let you draw directly the character. In some cases

you can also autotrace them from a BMP or TIFF bitmap. And you can place

AI/EPS files created in other applications. Again, the many possibilities are

shown in the workflow diagram of this article. The main handicap of Font

creation programs is the price/functionality relation. They can be reallyexpensive and you will only use them for font creation/editing. This means that

if you create fonts ocasionally, you will find little use to the program. Consider

this: depending on the route you follow on the Workflow, you will need a proper

fontmaking program only for a short time. If you have some friend that has one

of these programs, if he lets you use his computer for a while, you can bring a

disk with your .ai or .eps files ready to place in the character slots, or better

still, a raw font produced in a cheap utility or in CorelDraw. Then, in a while you

can prepare a decent font and generate it. This is what I do.

There are several fontmaking programs that are available for trying out. The

most notable and powerful of these is Pyrus Scanfont . With this tool, creating a

font can be a matter of, literally, a few minutes. Just open a bitmap of thefont, or scan it directly with the program. One command separates the shapes

(that is, autotraces them), then you drag these shapes to a character map

window, and the font is ready. Name it and you're done! Amazing. It you start

with a clean scan of your handwriting, you can have it ready to use in a few

minutes. Of course, you may need to tweak individual characters, spacing, etc.

and you can do it with precision. You can try Scanfont to create up to five fonts!

Get it from their distributor, Pyrus or FontLab. The same company offers the

most advanced font creation program, FontLab, and a basic font editor and

creator, TypeTool (also with a 5-font tryout), together with some other type

utilities. A visit to their website is recommended.

There are two basic font creators, Softy and FCP ( The Font Creator Program)that you can download from the net. The first is a very small program, but it

isn't very intuitive and lacks a good help system. FCP is available from High

Logic, in the Netherlands, and is a good starting point to learn fontmaking.

And finally, what about Fontographer? This used to be the most used font

creation tool. A professional caliber program, distributed by Macromedia. There

is no tryout version of this program, so you will not be able to get a feel for it

before buying. You can find more information about Fontographer at the

Macromedia site, and there is also a Fontographer newsgroup. However, many

years has passed since the program was last updated and it lacks many features

present in Fontlab.

Don't forget to take a look to the net resources listed on the below and to check

out the second part of this tutorial. Jump there...


8 26/08/2010 11:10


8/8

Resources on the netThese are some selected articles about fontmaking.

This collection makes almost a complete reference

book to get you started. These articles cover almost

every topic. If some of the links doesn't work, don't

blame mein the Internet they get stale faster than

home made cream.

ChankDiesel tutorialA very good and detailed tutorial chez Iconian Fonts (Dan Zadorozny)

Divide by Zero tutorialCreating fonts in Corel Draw

Another detailed tutorial for CorelDraw users.

The digital recovery of a 18th century font, Ibarra, explained by ateam

from the University of Zaragoza. You can download the font, too.Even more information about font-editing programs, and actually anything

relatedto type at Luc Devroye's On Snot and Fonts. Good coverage ofPostScript language, Bziercurves, etc.

Of course, a search on Google will yeld many good results. Take a look

and see for yourself.

A tutorial using Fontforge and Autotrace. The process described there

can be applied to any program, however.See even more links about typography in our links page.Now it is time to proceed to the second part of this workshop, where

we will learn a few tips and advanced techniques.

2005 Typephases Design Home Credits Contact information


Font Creation Tutorial Part..

Documents

Transcript of Font Creation Tutorial Part..