HOW TO: Create An Intricate Display Font – HypeForType Tutorial

Categories Articles, Web Design

It’s all very well creating beautiful, intricate illustrated letterforms, but how do you convert them into a usable display font without sacrificing detail or quality? HypeForType explains how they converted Alex Trochut’s illustrated alphabet into Neo Deco, an D&AD award winning quality display font. Alex Haigh provides us with a key insight into this process in the following tutorial. (Want to follow this tutorial for yourself? Download the sample Neo Deco glyph to work with. (Strictly for Non Commercial purposes only)

Step 1: Finish Designing Your Alphabet

So you’ve already designed your alphabet. The first stage in turning it into a font is to check through all the characters for consistency, eliminating potential problems like stray points and overlapping elements. It’s usually faster to fix these issues in Illustrator before attempting an import into FontLab.

Step 2: Considering Extended Characters

It’s worth considering creating an extended character case when putting your typeface together. This will open your design up to a much larger market, giving people the option to use it across any number of languages.

Step  3: Create A New FontLab Project

Once all your characters are ready, open FontLab, and go to File>New. Save the file (Ctrl/Cmnd+S). Next, go to File>Font Info, and enter as much as you can into the font’s metadata. Pressing the diamond icon at the bottom of each window will automatically fill in some fields for you. For more detailed instructions, feel free to contact us. Remember that although the initial field in the Metrics and Dimensions tab doesn’t normally need changing, when dealing with detailed typefaces such as Neo Deco you should choose a higher UPM size.

Step 4: Size First

Before importing your characters into FontLab, first ensure they are big enough to be worked on – Alex’s had to be enlarged because they were less than 2.5 inches tall. As long as your sizing is kept within a range of 101-150%, FontLab will suffice, but it’s best to do your primary resizing within the program you used to create your lettering. If you used Illustrator, double-click the Enlarging icon, choose Uniform, and enter the Scale in the field (I use ‘US Letter’ as my optimum import size for the average 1000UPM font, but I tripled the target size for Neo Deco, enlarging each letter by 1500%). Click OK. Now press Ctrl/Cmnd+C and make a copy.

Step 5: Your First Glyph

You can now move your letter into a glyph cell in FontLab. Double-click the cell, and press Ctrl/Cmnd+V to paste the copied letter. To adjust the placement, click and drag it into position at the lower left. If you need to resize your letter further, go to Window>Panels>Transformation. Click on the enlarging icon on the panel, then check the Uniform box and choose Bottom Left Corner from the drop-down Center menu. Enter the percentage (I enlarged Neo Deco by another 122% here), and hit Return.

Step 6:  Making Use Of Decender Space

If you’re making an all-caps face such as this one, making use of the descender space will allow you to retain the largest possible glyph. I set a target cap height of 1930 (1970 for round characters, 40 units below the baseline and above the cap height). As shown, the baseline was actually at -215.

Step 7: Better The Outline, Stronger The Font

The more perfect the outline, the better the font. To ensure that you’re achieving optimal results, make sure you regularly use FontLab’s Audit features. These audits can be turned on selectively through the Preferences Panel.

Step 8: Non Vertical Lines

If you’re concentrating on a letter that consists of many non-vertical lines, it will help to turn off the Semivertical line audit. I had many extremum and connection flags that required tending at this stage, but my primary concern was the ‘Line segment too short’ flag – a result of fixing these in the 1000UPM size. In this situation, select the audit and check to make sure that no flags show on the glyphs. By utilising the maximum number of units possible, you will eliminate this flag.

Step 9: Save Time With Auto Hinting

Once you’ve eliminated all the flags, employ the remaining standard font production techniques to the spacing and kerning of the font. Go to Window>New Metrics Window. I strongly suggest using Autohinting on fonts of this complexity – it’s a default setting in the Font Info panel. First, adjust your side bearings. Double-click a glyph, and drag the side bearings to achieve the desired spacing in the Metrics window. Now open the quick select drop-down menu, use the alphabet sections to fill the field, then make sure you type it out to check the spacing before moving onto the next glyph. Once you’ve completed all the glyphs, you can begin kerning. Click on the letter to the right of the space you want to adjust, and drag the bar to move the letter. Check all letter combinations – upper- and lowercase – and basic punctuation as well.

Step 10: Generating Your Finished Font

Once you’ve finished spacing and kerning your font, it’s time to generate a working typeface. The most common format is TrueType or OTF. Open the Extended Steps document on your cover disc for detailed instructions on how to do this. You will receive an error message upon generation of an OTF version. This is a warning you will need to overlook – it actually refers to the fact that you’re using an unconventional UPM that may cause display issues on screen. This is unavoidable, so choose Ignore. Most programs don’t make display concessions for non-1000UPM sizes. The result often shows a character that appears to be cut off. The easiest way to fix this issue is to place a carriage return at the top of the text box so the entire character can be seen. You now have a beautiful display font, with all the detail of the original face.

Alex Haigh is the Creative Director at HypeForType - an online Font Shop working with the likes of Non-Format, Alex Trochut, Si scott, Jon Burgerman, and many other well international designers and studios.