FontLab : Using Illustrator to draw fonts for importing into FontLab
22.10.2005 by Sigurdur Armannsson
This is my first posting here in English. It has always been the plan to write some articles in English and also to translate some of my previous writings from Icelandic to English. The reason is quite obvious. The Icelandic population is less than 300.000, so there is a limited number of people who actually can read my posts.
Secondly, I know for sure that for at least some of the subjects I write about there is not too much information arround. Hopefully I can add a tiny bit of missing parts some might be looking for.
Thirdly, the stats for this little blog of mine shows that just over half of the visits are from English speaking countries, people who have found this page on Google or elsewhere, only to find that they can not read a single word.
As a start I will try to shed a little light on a topic that I have seen many looking out for: How do I move my font that I made in Illustrator over to FontLab?
Some of us have used Illustrator for years as our main vector drawing tool. And some of us might also have drawn few characters, glyphs, symbols or even a whole font in Illustrartor that we want to move over to FontLab to make a real font.
Copy and paste works but will give you unexpected results unless you set all parameters right, both in Illustrator and FontLab. I am combining information from the FontLab msn forum with my own thoughts on how to prepare font design in Illustrator CS for either copy-pasting into FontLab or saving as EPS for importing into FontLab.
Preparing Illustrator
There are few preference settings that need to be set right in Illustrator.
- Preferences | Units & Display Performance. Set all units to points. Note: Learn this useful Keyboard shortcut to quickly shift between Units: Command+Options+Shift+U. Or click on the Ruler.
- Preferences | Guides & Grid. Set Guideline every 10 pt and Subdivisions to 10.
- Preferences | File Handling & Clipboard. Enable AICB and Preserve Paths.
In the menu bar:
- View | Show Rulers.
- View | Snap to Grid. Disable.
- View | Guides | Lock Guides
- View | Show Grid (Optional)
- First of all we have to measure the font / glyph drawings we are going to use. I used millimeters in this example but you can use points or inches as well. As long as you have the dimensions of the Ascent and Descent to get the dimensions of the Em Square it does not matter and the results will be the same. We will convert all the dimensions to FontLab units. It is basically proportions we are after. Let’s take an example to explain this in detail.
- Here we have a drawing in Illustrator of some glyphs from a font. A good way to find out the basic dimensions of the font is to look at H, d, x and p and measure it from the Baseline. From the H we see that the Caps-height is 40, Ascender (d) is 42,2 and the x-height (x) is 28,8. Descender is always a negative number in FontLab calculated from the Baseline. There is no need to use the numbers here as negative ones, as long as you remember that all the measurements are made from the Baseline. Descender (p) is 12,4 down from the Baseline. You may find it handy to put in Overshoots, (the green boxes) where rounded letter forms exceeds the measurement lines.
- The upper- and lower case g are fine to find that out. It’s extremely small but easily found out by zooming into the drawings. The dimensions are summed up in the table below.
Make boxes with a very thin stroke. Or you can use colored boxes without a stroke like shown in the picture around the glyphs. Get the height in the Transform palette. I prefer to use colored boxes with some transparency because the stroke thickness gets in the way. I recommend that you keep measurements exact. Later on we are going to convert those numbers and enlarge the drawings quite a bit, so it is better not to round off the numbers at this point.
In the example below I round off to the nearest one digit after the comma (or point, depending on where you live) only to make it less confusing. What we need to find out first is the size of the Em Square. The size of the Em Square is the height of the Ascender + Decender. In our example that makes 54,6. The width of the Illustrator work file we are going to make will be 1000 pt, FontLab UPM Em Square. And we need to convert the numbers to fit in. Here is a table that shows the numbers and how they are converted:
- Size, divided with Em Square size, multiplied with 1000 = New size
- Ascender (d) 42.2 / Em Square 54.6 * 1000 = 773
- Caps (H) 40.0 / Em Square 54.6 * 1000 = 733
- X-height (x) 28.8 / Em Square 54.6 * 1000 = 527
- Baseline 0.0 / Em Square 54.6 * 1000 = 0
- Descender (p) 12.4 / Em Square 54.6 * 1000 = 227
- Overshots (Gg) 0.65 / Em Square 54.6 * 1000 = 12
- Ascender + Decender 54.6 / Em Square 54.6 * 1000 = 1000
Now we have all the basic numbers we have to use in the Illustrator file. I have also made available online an Excel file that will calculate all the demensions for you as you fill in the measurements.
Illustrator work file
- Make a new file in Illustrator. Make the art board 1000 pt wide and the height 1227 pt. 1227 pt is Em Square 1000 pt + Descender 227.
- Drag the ruler zero point from the upper left corner where the rulers meet to the very bottom of the art board.
- Drag a guideline from the top ruler to the height of 227 pt. This guideline will be the Baseline of the font.
- Drag the ruler zero point to the Baseline and to the very left edge of the art board. Note: This is very important because this determines the position of the glyph when it’s transported to FontLab.
- Drag guidelines from the top ruler to where the Ascender, x-heigh, Caps and overshoots should be according to your table.
Zoom in to get it precise. You may even find it easier to make three boxes, let’s say 20 pt wide and in the heights of 773 pt, 733 pt, 527 pt. Align the boxes at the bottoms and place on the Baseline. Drag the guidelines to the top of the boxes. When this is done you can resize your font design to the guidelines for further designing and preparation for transporting to FontLab.
But there is even an easier way to do this, which is a great timesaver: Use the Keyboard shortcut to shift between Units and you see that 54,6 mm, the Em Square is 154,792 pt. We want to resize it to 1000 pt. 1000 pt divided by 154,792 multiplied by 100 is 646. This means that in this specific example it’s possible to use 646% to enlarge all of the design. It also means that you can take the colored boxes to your file and:
- Do the 1 – 4 actions of the previous description.
- Bring in the colored boxes. Adjust the shapes to a more square form by using the Direct Selection Tool (the white arrow), and move the right side of the boxes to left.
- Put the colored boxes so that the Baselines are aligned exactly.
- Option-Click with the Scale Tool on the Baseline. Put in 646% in the Uniform Scale field in the dialog box that opens.
- Set guidelines according to the colored boxes. Delete the boxes when you are done.
- The percentage 646% is now the key number to all your enlargements and you use it to re size the font design.
Few things to remember about drawing fonts in Illustrator
- If fonts are drawn in Illustrator and intended to be moved over to FontLab it must be filled, not stroked.
- The drawings must not exceed the top or bottom of the Art board / Document Size.
- Let all your Nodes / Anchor points fit the Grid / Guidelines.
- Keep Snap to Grid on. When the drawings are moved over to FontLab will round the drawings off if it does not fit the grid.
- If you think you need more precision recalculate all the numbers in the table with 2000 (instead of 1000) and increase the Illustrator document size accordingly. Also change the UPM in FontLab to 2000.
Preparing FontLab
Few things have to be done on FontLab’s side before we can place the glyphs into it.
- Go to File in the menu and choose New. File | New.
- File | Font Info | Metrics and Dimensions. Keep it like it is: Font’s UPM is: 1000
- File | Font Info | Metrics and Dimensions | Key Dimensions. Fill in the dimensions from the table like is shown here.
- Go to Preferences | General. Be sure “Do not rescale EPS files” is checked.
Import – Export
Now everything is ready to swap your font design between Illustrator and FontLab in both directions. There are few options.
Copy the glyph in Illustrator or FontLab and paste it into FontLab or Illustrator. Works fine both ways in Illustrator CS and FontLab 4.6 and the glyph will stay proportional in either application.
You can also save an EPS out of Illustrator but it has to be exported as Illustrator Legacy EPS. Go: File | Export … Illustrator Legacy EPS in Illustrator CS. In CS2 it’s Save as … . Save as Illustrator 8 compatible file.
Individual characters or glyphs can be exported out of FontLab and opened in Illustrator.
Plurk This Post 
Buzz This Post 
Delicious 
Digg This Post 
Ping This Post 
Reddit This Post 
Stumble This Post
many thanks, very useful
Takk!
Bravo,
brilliant article that gives more than the gist of it all
well done to you Sigurdur
jerome from france
Glad you like it. Thanks for the comments.
Well Im going to bookmark this article, hopefully its a perm url
I don’t have much experience in making a font, I’ve tried on two occasions and failed miserable on both. Look forward to more Illustrator and fontlab articles
Esben: Actually there is not much else to say about AI and FontLab together. This method works incredibly well.
On the other hand I am preparing to write some tutorials for Illustrator. I am thinking for beginners up to advanced. You never know if I wont knock on your door for some comments and advice.
Well you don’t even have to knock, my door is always open.
I got this “fetish” for chubby types and since there aren’t that many going around, then I could just as easily make my own and this tut will come handy.
Could I convince you about writing a article on icelandic diacritics? Yes its really sad that a dane is requesting this.
Thanks so much for posting in English, althrough my partner knows a little Icelandic I don’t think he could have translated this into anything that would have been useful to me.
It has addressed my concerns about importing into FontLab. I have apx. 100yr old stencil fonts currently in an old version of EngraveLab & need to get them out & create ttf of opentype fonts.
I can get individual characters into Illustrator & then into FontLab, but my biggest problem is they MUST remain exactly some shape, I can not move any points as these must match up to perviously manufactured stencils & makings.
Any suggestions for a reliable font creation program that could do that?
This is an interesting problem. Try to post about this on the FontLab forum, http://forum.fontlab.com/
It says on EngraveLab’s site that the program can export pdf’s and maybe that is what you have used to get glyphs out. One thing I can think of is to raise the UPM size to something much higher than the usual 1000 or 2048, lets say 6000+ The Illustrator file should be adapted (made much larger) to that size and you would get much less distortion. It would however possibly reach some limitation to font exporting the fonts. I have seen limitation in exporting OT/PS flavor when using very high UPM number.
Hope you get some better answers on the FontLab forum.
Thanks Sigurdur,
As you suggested I have posted my problem on FontLab forum.
Cheers
hello, i have a font that i’ve created in illustrator and i’m in the process of imported it into fontlab. i did notice this statement which worries me:
“If fonts are drawn in Illustrator and intended to be moved over to FontLab it must be filled, not stroked.”
my font is made up of linear elements that are all stroke and no fill. am i doomed?
also, i downloaded fontcreator 5.6 and it seems to be comparable to fontlab. have you used this? i’m finding that my letterforms are not sharp like they appear in illustrator, rather they are appearing bitmapped. can you help?
by the way, i was in iceland earlier this year and i really enjoyed myself!
Well, in Illustrator, you should take your lines and go: Object > Path > Outline Stroke. That way you can fill that form and it looks like a line. Regular fonts we use for design are only made up of closed forms, even if they look like a thin line.
I have not used FontCreator, but my understanding is that it is quite good.
About the sharpness: In FontLab or Fontcreator?
Hi Sigurdur,
Thank you for your quick response. I followed your instructions and outlined stroke in illustrator, however I am still having the same problem. I have been using FontCreator because it allows me to do more than the trial version of FontLab I have, but both create the same effect…broken lines that aren’t crisp as they appear in Illustrator. Do you have any other recommendations?
Thank you in advance,
Mikel
Ahh. I see now why I don’t have Font Creator. It’s for PC only. So it’s hard for me to test this. The main question is: What happens when you export the glyphs from FC? You should be able to create a font even if it has only a few glyphs and then try the font in Illustrator and print it.
When you type the glyphs in Illustrator, try to outline it and compare it to the same glyphs you had before you imported them into FC. A few possible reason might be there: Maybe FC distorts the glyphs when you copy them over to FC. Maybe it doesn’t copy the vectors over but only a bitmap to FC. Check if you can do something in FC, like grabbing an anchor point and move it. Possible?
Another thing: As you are starting to make fonts, consider to buy TypeTools rather than FontLab, both made by FontLab. TypeTools mainly missing the more advanced features of FontLab Studio and is only $99 compared to $645 (which I have btw. never regretted).
Then, if you get well into fontmaking you will probably want to upgrade to FontLab Studio (I should get a commission for this!)
nice. thanks!
some links to images are broken.
when i export a font from illustrator into fontlab by via the clipboard
only appears as outline of the shape not a filled shape can any one help cheers
@jonny: First thought is that your shape is not closed. Second thought: Preview not on in FontLab (Shift + Command + P.
On the last thing to do:
“Go to Preferences | General. Be sure “Do not rescale EPS files” is checked”
I can’t find that option on FL 5.0.4 on Windows.
I have done all the other things, but always get resized between the baseline and the ascender.
@Pablo: FontLab has changed a bit since I wrote this 4 years ago. Today this setting should be:
General Options: EPS and bitmap background: Keep size (1 EPS pt = 1 UPM unit).
This should give you the correct results if you set Illustrator’s grid to the settings that are described above.
Dear Sigurdur:
Some years ago, I started to develop a font based on West Coast Native American art and finished all the lower cases. Native art is very curvy and lends itself very well to anything with Bezier curves, so a font within Illustrator was a natural. Recently, some volunteer work with a Gallery of Native Art suggested that I go on with this work and complete this font.
However, I am 71 by now, retired, still working with Illustrator but buying FontLab sounds a little overkill. My question therefore is, is there a cheaper program that I can use instead and that does a similar job. I might go as far as Fontographer, out of nostalgic reasons (I witnessed its creation and I knew John Warnock, founder of Adobe) but if I can go cheaper that would be fine, too.
Can you help?
Thanks
Tom
Hello Tom.
You should consider buying TypeTool from FontLab. It’s very similar to FontLab, in fact almost identical but only missing high-end features that are usually only needed by professional font designers.
TypeTool costs only a fraction of what FontLab Studio costs. You should also contact FontLab and ask if they have special deals for older users, similar to their great academic deals. List price for TypeTool is $99 I think.
Hope this gets you started
http://www.fontlab.com/font-editor/typetool/
Thanks, Sigurdur, I will do that.
Tom
Dear Pablo,
I had the same problem as you and found the solution with these instructions on the FontLab forums…please only do this if you know what you are doing, I believe the “Do not rescale EPS file” option is called “Fit EPS files to (Ascender-Descender) height” in windows but the option does NOT work:
Quit FontLab Studio, run regedit, find HKEY_CURRENT_USER\Software\FontLab\Studio5\Options, then find value named EditScaleEPS. Edit this value: just enter 0. That’s it.
This way you don’t remove your options and your glyphs are not scaled when pasting from Illustrator.
But keep away from enabling the Fit EPS files to (Ascender-Descender) height option located in the Options > General > EPS and bitmap background dialog box. When you activate it and open Options dialog box again, FontLab shows it remains not activated, but in the matter of fact, it is activated – when you try to paste any glyph from Illustrator, FontLab Studio will scale it. There is no doubt it’s a bug.
source:
http://forum.fontlab.com/fontlab-studio-problems/“do-not-rescale-eps-files”-not-available-in-flv503-windows-version-t309.0.html