Font Making Made Easy
Become a cutting edge typographer for fun and profit
"You can make web pages, eh?" says the guy smugly sipping a soda across from you, "Guess you just think yourself one hotshot designer, huh?"
"Ever made a font?"
The true test of designer coolness... Sure, you might be able to whip up graphics with the best of them, but only the elite use their own typefaces in those graphics. With the rise of the Internet and desktop publishing, more and more indie designers have started their own font design houses, or foundries, in cooldesignerspeak. You may have heard of startup online foundries such as Chankfonts, Larabie Fonts, or The Font Diner. Creative, cheap, and with plenty of attitude, these new independent alphabeticians are changing the typeface industry. Most online foundries give some of their fonts away for free, and charge anywhere from $10-$100 for their commercial fonts. These fonts come in a variety of new and different styles, and you may have seen sites advertising "grunge", "punk", or "alternative" fonts, taking a cue from music classifications. You can see some of these new fontographers work on Grape Soda Cans, Taco Bell Wrappers, and Prince albums.
So how can you become one of the new font elite? Let's start by making a font.
First of all, obtain yourself a copy of that amazing fonting tool, Macromedia Fontographer. Everbody uses Fontographer. Everybody. That's because there really is no other program that comes close in the fontmaking category. You can draw your font from scratch using the built-in tools, or you can make the characters in a bitmap or EPS graphics program and paste them in. Fontographer comes for both Mac and PC, and both versions can generate TrueType, bitmap, and PostScript fonts for both platforms. Uh-oh. Don't tell me you don't now what the differences between TrueType, bitmap, and PostScript! Oh well - for those of you left behind, bitmap fonts are the oldest fonts, prevalent back in the beginning of digital typography till a couple years ago, and still used (though not very darn much) today. The thought behind bitmap fonts was that each character was actually a picture, made up of black and white dots called pixels, just like most computer graphics. Each different size for a font had its own file, which contained a picture of what each character looked like at that size. So to use a font, you would usually have installed several font files, one for size 12, one for size 18, one for size 24, and so on. The problem was, what if you wanted the font at a size you didn't have. For example, let's say you needed Geneva to print at 100 pt, but your largest font was Geneva 72 pt. The program displaying the font would then simply enlarge the 72 pt font to the dimensions needed to display at 100 pt. The result was ugly jagged edges due to pixelation at sizes not supported. To fix this, two standards, came out, based on Adobe's EPS technology. Both used mathematical representations of lines and curves to draw their fonts, called vectors, rather than pixels. (Graphics based on that concept are called vector graphics, and graphics based on pixels are called bitmap graphics) The result was fonts that could be scaled to any size and always look the same. Also, they only needed one file to install. For viewing on computer screens, there were TrueType fonts, and for printing, PostScript fonts. Today virtually all typefaces use the TrueType and PostScript standards, so you will probably want to generate the fonts in these formats.
After you have played around with Fontographer for a couple minutes, you'll probably want to graduate from its sparse drawing tools to make your own font masterpiece. If you just want to draw your font out on a piece of paper first, go for it. (Secret insiders tip: use a black felt tip marker/pen for best results) Now scan that sucker into Adobe Photoshop (Mac/PC), ColorIt (Mac), PaintShop Pro (PC) or any other bitmap graphics program you feel is worthy, somewhere between 150 and 300 dpi. Clean up your scanning job, and make sure your characters look the way you'd like them to. Now save it, (TIFF format sounds good) and rest up a bit, because the decision-making part comes up next
Got that done? Good. Now you have a couple different options.
Option 1 - For users of later versions of Fontographer, those with the Auto-Trace feature
You can copy the letters individually from where they are now and paste them into Fontographer one at a time, then use its Auto Trace (Shift-Ctrl-T) feature to turn that bitmap drawing of a letter into a vector representation of the letter. Now that your letter is based on vectors rather than nasty old pixels, you can turn it into a cool looking font. But I assume you want to put the other 25 letters in too, and maybe a number or two. Copy and paste those in, (In other words, open Photoshop, select only the black part of the letter with your handy magic wand tool, press Ctrl-C to copy, open Fontographer, double-click on the letter you want to paste to bring up its editing window, and press Ctrl-V) auto-trace them, and you've got a font, almost ready to go. Save it as a .fog Fontographer file for safekeeping.
Option 2 - For users of earlier versions of Fontographer, without the Auto Trace command, or those who just like using Illustrator.
Grab yourself a good bitmap->EPS converter, like Adobe Streamline (Mac/PC, or Corel OCR-TRACE (Mac/PC, Included in CorelDraw), and a good EPS graphics program, like Adobe Illustrator (Mac/PC), Macromedia Freehand (Mac/PC), or CorelDraw (Mac/PC). Now open up your bitmap->EPS converter, and convert that TIFF file you just made into a great-looking vector graphic, ready to be fontified. Close that program, and open your EPS/PostScript/Vector graphics program. There you will be able to make any more changes you can think of to your letterforms, and practice your skills in this strange new world of curves, strokes, and fills. Once you have your font ready, you can open Fontographer, and paste each letter into its appropriate box. (In other words, select your letter in Illustrator, press Ctrl-C to copy, open Fontographer, double-click on the letter you want to paste to bring up its editing window, and press Ctrl-V) Once you have all the characters in, save it as a .fog Fontographer file.
Now we're down to the home stretch, so let's make sure your font is going to end up good. Select all of your font's characters in Fontographer, (Ctrl-A) and choose "Auto Space" from the Metrics menu. This will bring up a dialog box letting you choose how close or far from each other you want your letters to be. Any value from 10-25 should work fine - just type it in, and press the "Space" button. This spaces your font evenly, so it doesn't come out with odd spacing, a common problem with beginners and their typefaces. Now select all your characters again and choose "Auto Kern" from the Metrics menu. Pop in another value somewhere between 10 and 25 where it says "How close to kern:", then press the "Kern" button. Now you're ready to name your font. Go to your Element menu, choose "Font Info", and choose "General". In the resulting dialog box, type the font's name, and choose a style (bold, italic, funky) from that drop down menu, or type in your own creative style name. Under notice, make sure you include a notice of copyright, along with your name, the date, and anything else you want people to see when viewing that font's poperties. Press OK when you're done, and go to your Element menu, choose "Font Info", and this time choose "TrueType 'name'". There you can type in the font's name again, (make sure it's unique) the version number of the font, and your copyright/trademark info. Press OK, and go to your Element menu, choose "Font Info", and this time choose "TrueType 'PCLT'". (Last time, I promise...) Down where it says "Typeface", put in your font's name. (Make sure it's not over 16 characters). Press OK, and you're ready to go. Choose "Generate Font Files..." from the file menu, and you get one last dialog box. Choose the platform (Mac or PC) that you are making the fonts for under "Computer:", and choose TrueType from under "Format:", unless you have a good reason to choose something else. Click the "Generate" button, and you've got your very first font. Don't you feel proud?
So there you go. Zip or BinHex that font up with a ReadMe file extolling your fabulous fontmaking feats, and put it up on the web. Now you just have to sit back and wait as the glamorous life of an alphabetician comes to you. In the meantime, go hang out in trendy coffeehouses and speak very loudly about how much you love being a world-renowned typographer. You deserve it.
And now, just for staying awake during the entire article, you get a free gift!
It's a new exclusive free font from me...
I made it yesterday, using these exact same award-winning techniques.
It's called Blendered, and you get it here first, before its official public release to rave reviews and hoopla...
Download blendered.zip for PC (TrueType)
Macintosh Version Coming Soon!
Font Making Made Easy
Be a Typographer For Fun and Profit
Battle of the Acronyms
New Web Vector Standards
Missing the Point
Art and Radiohead liner notes
Protect your site
What all the hype's about
Making Money and Looking Good
A Webmaster's Wish List: Gifts To Grab This Holiday Season
Web Graphics: A How to Guide Part 2
Web Graphics: A How to Guide Part 1
Neat. Making a Good Page
This is Madness! A Fable