• English
• Català
• Español

Typephases Design: handcrafted and digital

• Using dingbat fonts
• The Whimbats
• Creating the Whimbats
• Selected links: typography
• Font creation workshop: the basics
• Font creation workshop: advanced
• High Logic: font software

• We also keep an online journal, called The Typephases Observatory. It’s our blog where we periodically add some new thoughts, links and whimsical occurrences. Here’s its RSS feed.
• Find also more ideas and inspiration in our Specimen book and the Serving suggestions.

Font creation tutorial - advanced

Contents:

• Miscellaneous tips
• Scanning tips and tricks
• Vector tracing tips
• Template to create characters
• Bringing characters to the font editor
• Converting lines to shapes
• Calligraphic and special brushes
• Tips for handwriting fonts
• Combining and reusing shapes
• Special effects
• Part I of this tutorial

This page is not a well-structured workshop like part I. It is rather a collection of interesting ideas and tips to create fonts once you have passed the first part of the learning curve. The first article should be a good platform to get you started: here you will find more details and inspiration.

Miscellaneous ideas for fontmaking

• Draw the characters following their distribution in the character set to place them faster in their slots in the font you are designing. You can get the full list in the correct order simply opening the character map utility (see the picture below as an example.)
• Use your imagination when you design the characters. You don't have to limit yourself to pen on paper. Use crayons, pencils, brushes, markers, cotton sticks, technical pens, your fingers, cut and paste papers...
• If you are designing a bitmap image for big characters, or you are making paper drawings for it, it is unnecessary to fill the whole shape in black. You can use the hollow shapes and then fill them using the paint bucket tool, or other tools from your paint program.
• Smooth the shapes when you trace (or autotrace). You can do it adjusting the threshold of vectorization in your autotracing utility. Play a little with its controls to get the best results: a combination of accuracy and simplicity.
• Get rid of excess anchor points. Each vector shape should have the minimum necessary anchor points to define its contour. Otherwise, the font will require more memory to be displayed or printed; sometimes it will not print at all. For example, to draw an oval requires only four anchor points.
• Test the font. To test your product, try to print it at different sizes. Some fonts will look terrible on screen, but they will perform well when printed. Try to display your font on screen both with antialiasing turned on and off.
• Add extended characters. A fontmaking utility can solve a common problem. Many users with a language other than english need extended characters (such as accents, dieresis, c cedilla, etc.) You can add those missing characters to a font simply copying and pasting the characters you want, like the vocals, to the location of the extended characters. Then, copy the acute and grave accents, and paste them where needed. The best way to do this task is to use the "create composite characters" or "reference characters" feature that we discuss later.
• If we want to draw onscreen, many illustration programs offer good tools, like the calligraphic pens (with a precise control on the angle between the stroke and the baseline and the width of the stroke) You can always apply a different stroke to an existing shape. Here you have to consider a few more points,that we discuss below. It is not always that easy to draw with the mouse; if you have a graphic tablet you can do it more easily.

Scanning tips

If you are skilled in bringing images into your computer, using a scanner, you just need to know a few more things to get the better results for images targeted to fontmaking. The first thing you must consider is the resolution you need, and the scanning mode you are going to use.

Many font designers use the minimum resolution (72 dpi) and they acquire large characters, made with some drawing implement on paper. Then, the image is used as a template to trace manually (or automatically) a vector contour on top of the bitmap. Why use an image at this low resolution, when the scanner is able to get much better scans? If we draw large character shapes, and then scan them at a low resolution, we will obtain the overall shape into our graphics/fontmaking program. This is exactly what we want most of the time; if we scan smaller characters at a very high resolution, many artifacts will appear on the digital picture, and many irregularities in the contour, resulting in worse autotracings or a difficult hand-tracing. Usually, high resolutions end up with more inconveniencies than benefits. However, if the images are small or if you want to get details of a small, complex image, you will need to use higher resolutions for scanning. I usually scan at 300 dpi grayscale when I want to create symbols for a dingbat.

Normally you will only scan images in either black and white or greyscale. Scanning in colour is actually no good to get images for a font (unless you start from a colour picture and you prefer to adjust the colour within a photo-painting app.) It is recommended that you scan in grayscale rather than in black and white; even if you have a black and white drawing as a starting point. You will convert the image to 1-bit bitmap (black and white) in your painting program instead. Why? Even if your drawing _seems_ just black and white, it has lots of tonalitities, ranging from black to white, that you will lose if you just admit these two extreme values. Indeed, you will discard useful information if you don't use the rich range of grey values on the paper (even a "pure" black ink drawing has different tonalities that enrich it.) The routine to scan can be as follows:

1. Scan at 72-300 dpi in greyscale mode (depending on the picture size.)
2. Use the contrast and brightness control panel, or the levels dialog box in your program to enhance the image. Move the contrast and brightness sliders, or enter a numeric value to test it until you have a clean picture with all the details you need, and as little noise as possible.
3. You can smooth the uneven contours using some filters in your program, such as Soften, Blur, or specially Gaussian Blur; then use the contrast/brightness dialog or the levels panel to convert the image to something ready to convert to black and white.
4. When you are satisfied with the results, it is time to save the greyscale image you have just modified. Use a lossless format, such as PNG, GIF, BMP or TIFF.
5. Now convert your image to 1-bit bitmap, that is, to black and white. Most programs include a threshold option that lets you choose which pixels will be converted to white and which to black. Try different settings to get the best results. Alternatively, you can keep only the greyscale image. Most autotracing engines are able to convert a greyscale image to black and white before tracing it. You can try it, and if the results are unsatisfactory, you can always produce a more controlled 1-bit version from your saved image in the painting app.

Vector tracing tips

When it comes to tracing a digital image to get the vector contours you need to create a font, accuracy and quality are not always synonymous. If we use autotracing, the program may try to adjust excessive anchor points to the shapes of the symbols. A vector with too many nodes is more difficult to edit and has less quality; and a font with unnecessary nodes in all its characters will be a bigger file and a burden for the computer memory.

How can we get cleaner vector shapes --just with the necessary anchor points? The more radical approach is to hand trace every character. That way we decide where to place every node, and we can achieve optimal results. Most professional font designers work this way. The scan serves, then, as a template to trace the vector shapes. This is recommended to create geometrically simple fonts, or high quality text fonts. For something less ambitious, or for complex dingbats or handwriting, it is better to use autotracing. If you are lazy, don't ever think about hand tracing!

If we don't want to work that much, we will have to tweak the autotracing settings in our program (Streamline, Corel Trace, Freehand, Xara or whatever tool we use.) It may be necessary to reduce the tracing sensibility, in order to get rid of irregularities and keep just the overall shape of the symbols.

It is also possible to clean up the paths once the tracing has been produced. This is a feature included in some programs (called Smooth Paths or Clean up paths.) Again, it is possible to specify the range of smoothing that we want to apply. Some nodes are discarded in the process, and the shape is kept more or less intact, in a more simplified version with fewer anchor points. Obviously, some projects will admit a more energic cleansing, while others (such as a complex illustration font) will have to keep more nodes to maintain its fidelity to the model.

A template to create characters

Let's see how to set up a template in a drawing program to prepare the characters you will put into your font. Here I will use CorelDraw as an example, because this is what I have and it lets you export fonts directly, but you can do it with whatever illustration application you use.

Start defining your page with custom dimensions: set the page units to points, and type in the dimensions field 750 points wide and 750 points high. The reason why? These are the dimensions that will let you produce characters that will print well, and you will be able to edit even the tiniest details in each character's contour.

Place the coordinates (the ruler) origin at bottom left, but not on the same corner: just a bit offset (at 30 points from the bottom and 30 points to the right. See the figure.) You place the origin point to a new position dragging it to the new point. Now it is time to set some guidelines to help you draw your characters, keep them consistent in size and place them where they belong. Drag the guidelines from the top or left ruler to the desired positions on your page. Where? The most useful guides are:

• the baseline.
• the x-height. Not just the letter x height: the lowercase letters without ascender or descender parts share this same height.
• ascender height: the topmost height of letters such as l, t, d...
• descender height: the (negative) height of the bottom of the j,g,p...
• Some type designs have different heights for uppercase letters and the ascender of lowercase letters, but they are pretty close. You can place different guides if you want to be accurate. For simple works it is unnecessary.
• If the letters will connect their left and right sides, like it happens in script fonts, you can place a guide where the characters must touch each other.

Finally, you need some letters as a template. Some programs will let you convert them to shapes, and then to guides. If you cannot do it, just place the letters in visible, non editable layer, and give them a soft colour to use them as a reference without being distracted. The letters don't have to occupy the whole page. You can leave a third or space on top, or even more. Note that the descender portion will be off the page, actually. Do not worry, it will work.

Now you are almost done. If your program has multipage support, add new pages that share the same guides. You will use a page for every character. As a whole character set has many letters and symbols, this would mean many many pages. You can create separate templates for lowercase, uppercase, and so on, and save them separately. These files will be more manageable, having only about 26 pages. If the program you use doesn't have a template option, just save it as a normal file. When you open it, remember to save the file with the characters you have drawn with a different name! And finally, if the program doesn't offer a multipage option, you can create a layer for each character. When you have finished one, make its layer non-visible and go to another layer.

From the drawing program to the font editor

If you have a font editing program, such as The Font Creator program, FontLab, Fontographer or whatever, you can incorporate the vector shapes in each symbol slot in the font file. The font editors normally have a import filter to get postscript vectors (saved in either EPS or AI format.) We suggest to save the symbols in a cut-and-paste file that we can call symbol.ai or symbol.eps. This procedure is recommended: when we finish one symbol in the drawing app, we drag it, or we copy-paste it to the symbol.ai window. Then we save this last file. In the font editor program, we import it to the character window where it belongs.

It is unnecessary to create separate .ai files for every character. With the method described above we only use a temporary .ai/.eps "container file" to transfer the vectors to the font creation programs. Why not copy and paste them directly? Unfortunately, this is only possible with some combinations of programs, and not as a rule.

An alternative technique of transferring vector shapes from the drawing app to the font creation tool is to copy-paste groups of symbols to your container .ai/.eps, import the group into the font creation program, and then cut-paste parts of this group, leaving only the desired characters in the corresponding place.

One trick that is recommended to use is including spacer elements with the letterforms. These spacer elements or control blocks are simply small simple forms, like rectangles, uniformely placed in all the eps files that we bring into the font editor program, for example, one aligned with the uppercase height and one with the descender guide. These elements will produce consistently scaled characters in the font editor. They can be easily erased when the letters are in their place:

When we have the each symbol in its correct location in the font file, it is possible to further edit it: reverse contours, retouch the shapes, apply special effects. What is reversing the contours and what is it worth for? This question might have a rather long answer. When a symbol is composed of different paths, like in the O, the direction of these paths must follow certain rules. Otherwise, the font might not print or display properly. Some font editors will display the symbol all in black if there is some issue with its path directions, and then let you automatically correct it with an option such as "reverse contours" or "correct path direction".

From a line to a closed path

In a vector drawing program, a line may have different kinds of strokes: thinner or wider, with a certain angle. It is often easier to draw lines than complex closed shapes. For example, to get an "O" we could draw just one ellipse (with closed paths, we need two ellipses, and them combine them to punch the hole.) Why, then, don't we use lines instead of closed paths? There is something that we cannot change in the way font symbols are defined. Each symbols must be a single closed path, or a combination of different closed paths. An open path will be ignored, and the width of its strokes will not be displayed.

It seems that we will not be able to use the easier method of drawing characters-- drawing lines instead of closed shapes. Fortunately, there is a workaround. Most drawing programs have an interesting option called "Convert lines to shapes" or "Expand stroke" that will convert a simple path to a closed and filled path. This path reproduces the shape of the line, with the stroke and angle we have used; it may be even a composite or combined path, like in the example we include here. The first O is useless as a font element. The width of the stroke would be ignored. However, when we expand the strokes (in this example they are slightly narrower) we get two combined paths. Both are closed and filled, and have no stroke. This combined shape can be immediately used for a font character.

Nick Curtis, of Nick's Fonts fame, uses this line-to path method very frequently to create many of his charming fonts (those with monoline contour).

Calligraphic and special brushes

Even more interesting are the calligraphic brushes offered by most illustration programs. This kind of stroke is really suited to font creation. Using a calligraphic stroke cannot be easier; we just select it from a panel and draw using the pen tool or the freehand tool. The stroke we get is based on a natural calligraphic shape: it has a certain angle with the baseline, for example 45°. This means that vertical lines will be much narrower than horizontals, and the wider strokes will be those that keep a 45° angle with the baseline. With a real calligraphic pen, when you draw a vertical line, you do it with the corner of the pen, while you get wider lines in horizontal.

The calligraphic pens in a drawing program deserve a detailed exploration, because there are many creative possibilities. We can even apply a calligraphic stroke to a simple stroke that we saved in another project. If we draw a base font just with simple strokes, we can obtain many different variations, just changing the kind of stroke we use: more or less wide, varying angles, different terminations.

Some programs like Illustrator, CorelDraw, Xara X and Fireworks offer interesting art brushes. They work with any path stroke, and can be applied to any previous drawing with lines. Some of these incredible brushes seem to have been designed for font creation, especially for calligraphic and informal handwriting fonts. If we draw even a simple form, like the a in the example, we can then apply an art brush and bring it to a completely new dimension. Illustrator, for example, includes a variety of art brushes, but we can custom create our own, hence the possibilities of this technique are virtually unlimited.

However, as beautiful as these brushes may be, they are still single strokes. We have to use a workaround to get their effects into a workable shape. The solution comes again using the expand stroke option. The only problem we will find is the high number of anchor points that we get when we convert the line, with an applied complex brush, to a composite closed path. In the example that follows, the first and second characters cannot be used as font symbols, because they are simple lines; the first with a normal stroke, the second with an art brush stroke. But when we convert the latter to shapes, we get a rather complex but usable composite path that we can bring into the font creation program. If the vector is too complicated for practical use, we can export the image to a bitmap format and trace it back following the procedure described before.

Tips for handwriting fonts

When you learn to create fonts, digitizing your own handwriting is an attractive project. To create a font from your own writing is relatively simple, but there are some special details. Most personal handwritings tend to have connected letters, because we let the pen flow on the page and tie one letter with the next one. Of course, the digital font should recreate the rhythm of our own writing on paper, including these connections between letters. However, when we scan the writing to create a font outline on top of it, we will get a continous image for each word. For practical purposes, the letters should not touch --they must be isolated characters to put each one in its place. One solution could be writing the characters individually, but the results are very often unnatural and stiff, with little resemblance to the hand script. I have created several fonts with this technique, like Amano or Honcho, and sometimes they work, sometimes not. It depends on the words you write. But they are somehow different from the true handwriting in which they are based.

From this experience, now I recommend an alternative system. Write the text sample normally, with connected letters, the bigger the better (you can use a marker if you want to write larger characters). Write some "typographical" sentences, such as "pack my box with five dozen liquor jugs", "sphinx of black quartz judge my vow" or whatever you like. This nonsense phrase contains the whole alphabet! Write it several times, so you can select the best letters for your project. Then write the same in uppercase, but this time try to write separate characters; finally you can write some special symbols and punctuation. After you have scanned the sheet, you must slice the individual letters from the lowercase sentences. You can do it in your painting program. Magnify the image to look in detail where two adjoining letters touch and make a thin cut line to separate the letters, using any tool: the line tool, the pencil, the eraser. Just make sure that most letters have their side connectors aligned. You can use the paint program rulers and guides to decide where to cut. One comment here for a very special program called Scanfont. It makes all these tasks really simple. More information about ScanFont in the first part of this series, and at their website, Fontlab.com.

Combining and reusing shapes

The combination of shapes is an interesting method to create character shapes. Each illustraton program includes filters that will let you cut, join, exclude, intersect... two or more shapes to get new paths. Given that a font is composed of elements that (with some variation) are repeated in different characters, it is possible to create a complete alphabet with a Frankenstein method, combining parts of different symbols, and using the shape filters of the program to achieve the desired results. For more detailed information about how to reuse elements in a font, read the Iconian fonts tutorial or some other material.

Some programs, notably Illustrator, make combining shapes a breeze. With its pathfinder palette, it is very easy to divide, merge, crop... two or more shapes. Very useful to punch holes in closed paths, for letters that have this trait (a, b, d, e, g...) or to weld several parts into one single shape.

There is yet another level of reusing elements that you can take advantadge of. In a font creation program, the special characters like accented vocals, not surprisingly, are created from two separate shapes (the accent and the letter.) There is a way of combining these elements that is called differently in each application, but the results are the same. When you reference a character to use in a new character, the second is linked to the first. This means that you can instantly update all the instances of, say, an a in a font just changing the base letter. The technique of creating composite characters also saves space in the font file, because the information stored is simpler.

Special FX

When a designer creates a font, usually plans to develop a complete family of related typefaces. Text typefaces often have bold, italic and bold italic versions. But there are many more possible variations: hollow, slanted, shaded, narrow, wide... versions of a font. Some type creation apps will let you apply these variations and effects to a group of characters, speeding up the design of alternate versions of a font or the different members of a font family. For some expert font designers, like Ray Larabie, to generate variations of a font is a piece of cake. They take advantage of scripts or automated actions that will batch process a number of fonts to create new versions (notably in the Grunge collection of Ray Larabie!)

A perfectly smooth and geometrically impecable contour is what we want to create for a text font. But in certain cases we want the opposite effect: we want a distressed look, or a retro look simulating an old printer or ancient typeface. This can be easily done applying some filters either in a painting program, a vector program or the font editor itself. These effects can be applied to one of our own fonts, or we can start with another design (but always check out the legal stuff- copyright issues and the like. It is legitimate to start creating a font with another typeface as a model, only if you really create something different and new!)

You can apply special effects to your scanned drawings, or to an existing font in a painting program such as Photoshop or Paintshop pro. There is a huge variety of filters or plugins that you can experiment with. The results are often umpredictable, and sometimes you can be lucky to get a really cool effect that you might like to preserve in a font. Another way of tinkering with your fonts in a painting program is to use the copy and paste options. You can alter a copy, then paste it above or behind the original letters to get new shapes. Remember that before being able to use the symbols you produce in your paint application, you must convert it to black and white first and trace it.

The vector illustration programs are ideal to manipulate letterforms as well. You can make basic editing tasks, using the program tools and filters (the shape combination filters are especially useful). But that is not all. You can take advantage of the multiple distortion tools, and even some special tools (perspectives, 3d rotation, envelope, and many more. In some cases, you can create special effects in the contours using options like "roughen". Just select the characters, try with different settings and you are done. There is a lot to explore. The basic features of any vector drawing program are more than enough, but in some cases there are special plugins available (especially in the case of Adobe Illustrator.)

Finally, a good font editor includes special effects that can be applied to a single character or to a range of characters. These effects simplify the creation of italic or slanted versions, different weights (from thin to black), outlined fonts, and many more. You can also scale characters, for example, to create a small caps font. One of the most complete fontmaking tools, FontLab 3, includes some special effects (called bold, outline, 3d extrussion, 3d rotate, college, shadow, random move of nodes, envelope and gradient) Using these filters it is very easy to produce many versions of a display font. It is not surprising, indeed, that some font designers offer not just a single typeface but complete families that include outlined, shaded, oblique and other variations from the basic member of the family. Creating outlined or shaded typefaces does not seem as necessary as it could be years ago: after all, most drawing programs will perform these modifications with a couple of clicks. However, if we have a font already converted to a special version, it is ready to use in any program and any version.

So now you are on your way to become an accomplished font designer! I hope some of the ideas I have collected here will prove inspiring or useful for you. If you have any suggestion, comment or correction, please get in touch. Your help will improve these pages. And remember to check the recommended resources we list on the first part of this tutorial.