Using Illus­tra­tor to draw fonts for import­ing into FontLab

This is my first post­ing here in Eng­lish. It has always been the plan to write some arti­cles in Eng­lish and also to trans­late some of my pre­vi­ous writ­ings from Ice­landic to Eng­lish. The rea­son is quite obvi­ous. The Ice­landic pop­u­la­tion is less than 300.000, so there is a lim­ited num­ber of peo­ple who actu­ally can read my posts.

Sec­ondly, I know for sure that for at least some of the sub­jects I write about there is not too much infor­ma­tion arround. Hope­fully I can add a tiny bit of miss­ing parts some might be look­ing for.

Thirdly, the stats for this lit­tle blog of mine shows that just over half of the vis­its are from Eng­lish speak­ing coun­tries, peo­ple who have found this page on Google or else­where, only to find that they can not read a sin­gle word.

As a start I will try to shed a lit­tle light on a topic that I have seen many look­ing out for: How do I move my font that I made in Illus­tra­tor over to FontLab?

Some of us have used Illus­tra­tor for years as our main vec­tor draw­ing tool. And some of us might also have drawn few char­ac­ters, glyphs, sym­bols or even a whole font in Illus­trar­tor that we want to move over to Font­Lab to make a real font.

Copy and paste works but will give you unex­pected results unless you set all para­me­ters right, both in Illus­tra­tor and Font­Lab. I am com­bin­ing infor­ma­tion from the Font­Lab msn forum with my own thoughts on how to pre­pare font design in Illus­tra­tor CS for either copy-pasting into Font­Lab or sav­ing as EPS for import­ing into FontLab.

Prepar­ing Illustrator

There are few pref­er­ence set­tings that need to be set right in Illustrator.

  • Pref­er­ences | Units & Dis­play Per­for­mance. Set all units to points. Note: Learn this use­ful Key­board short­cut to quickly shift between Units: Command+Options+Shift+U. Or click on the Ruler.

FLpoints2

  • Pref­er­ences | Guides & Grid. Set Guide­line every 10 pt and Sub­di­vi­sions to 10.

FLguides2

  • Pref­er­ences | File Han­dling & Clip­board. Enable AICB and Pre­serve Paths.

FLfilehandling2

In the menu bar:

  • View | Show Rulers.
  • View | Snap to Grid. Dis­able.
  • View | Guides | Lock Guides
  • View | Show Grid (Optional)
  • First of all we have to mea­sure the font / glyph draw­ings we are going to use. I used mil­lime­ters in this exam­ple but you can use points or inches as well. As long as you have the dimen­sions of the Ascent and Descent to get the dimen­sions of the Em Square it does not mat­ter and the results will be the same. We will con­vert all the dimen­sions to Font­Lab units. It is basi­cally pro­por­tions we are after. Let’s take an exam­ple to explain this in detail.

FLmaelaletur3

  • Here we have a draw­ing in Illus­tra­tor of some glyphs from a font. A good way to find out the basic dimen­sions of the font is to look at H, d, x and p and mea­sure it from the Base­line. From the H we see that the Caps-height is 40, Ascen­der (d) is 42,2 and the x-height (x) is 28,8. Descen­der is always a neg­a­tive num­ber in Font­Lab cal­cu­lated from the Base­line. There is no need to use the num­bers here as neg­a­tive ones, as long as you remem­ber that all the mea­sure­ments are made from the Base­line. Descen­der ℗ is 12,4 down from the Base­line. You may find it handy to put in Over­shoots, (the green boxes) where rounded let­ter forms exceeds the mea­sure­ment lines.
  • The upper– and lower case g are fine to find that out. It’s extremely small but eas­ily found out by zoom­ing into the draw­ings. The dimen­sions are summed up in the table below.

Make boxes with a very thin stroke. Or you can use col­ored boxes with­out a stroke like shown in the pic­ture around the glyphs. Get the height in the Trans­form palette. I pre­fer to use col­ored boxes with some trans­parency because the stroke thick­ness gets in the way. I rec­om­mend that you keep mea­sure­ments exact. Later on we are going to con­vert those num­bers and enlarge the draw­ings quite a bit, so it is bet­ter not to round off the num­bers at this point.

In the exam­ple below I round off to the near­est one digit after the comma (or point, depend­ing on where you live) only to make it less con­fus­ing. 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 Ascen­der + Decen­der. In our exam­ple that makes 54,6. The width of the Illus­tra­tor work file we are going to make will be 1000 pt, Font­Lab UPM Em Square. And we need to con­vert the num­bers to fit in. Here is a table that shows the num­bers and how they are converted:

  • Size, divided with Em Square size, mul­ti­plied with 1000 = New size
  • Ascen­der (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
  • Base­line 0.0 / Em Square 54.6 * 1000 = 0
  • Descen­der ℗ 12.4 / Em Square 54.6 * 1000 = 227
  • Over­shots (Gg) 0.65 / Em Square 54.6 * 1000 = 12
  • Ascen­der + Decen­der 54.6 / Em Square 54.6 * 1000 = 1000

Now we have all the basic num­bers we have to use in the Illus­tra­tor file. I have also made avail­able online an Excel file that will cal­cu­late all the demen­sions for you as you fill in the measurements.

Illus­tra­tor work file

  • Make a new file in Illus­tra­tor. Make the art board 1000 pt wide and the height 1227 pt. 1227 pt is Em Square 1000 pt + Descen­der 227.
  • Drag the ruler zero point from the upper left cor­ner where the rulers meet to the very bot­tom of the art board.
  • Drag a guide­line from the top ruler to the height of 227 pt. This guide­line will be the Base­line of the font.
  • Drag the ruler zero point to the Base­line and to the very left edge of the art board. Note: This is very impor­tant because this deter­mines the posi­tion of the glyph when it’s trans­ported to Font­Lab.
  • Drag guide­lines from the top ruler to where the Ascen­der, x-heigh, Caps and over­shoots should be accord­ing to your table.

FLhemsquare2

Zoom in to get it pre­cise. You may even find it eas­ier 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 bot­toms and place on the Base­line. Drag the guide­lines to the top of the boxes. When this is done you can resize your font design to the guide­lines for fur­ther design­ing and prepa­ra­tion for trans­port­ing to FontLab.

FLsizedup2

But there is even an eas­ier way to do this, which is a great time­saver: Use the Key­board short­cut 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 mul­ti­plied by 100 is 646. This means that in this spe­cific exam­ple it’s pos­si­ble to use 646% to enlarge all of the design. It also means that you can take the col­ored boxes to your file and:

  • Do the 1 — 4 actions of the pre­vi­ous description.
  • Bring in the col­ored boxes. Adjust the shapes to a more square form by using the Direct Selec­tion Tool (the white arrow), and move the right side of the boxes to left.
  • Put the col­ored boxes so that the Base­lines are aligned exactly.
  • Option-Click with the Scale Tool on the Base­line. Put in 646% in the Uni­form Scale field in the dia­log box that opens.
  • Set guide­lines accord­ing to the col­ored boxes. Delete the boxes when you are done.
  • The per­cent­age 646% is now the key num­ber to all your enlarge­ments and you use it to re size the font design.

Few things to remem­ber about draw­ing fonts in Illustrator

  • If fonts are drawn in Illus­tra­tor and intended to be moved over to Font­Lab it must be filled, not stroked.
  • The draw­ings must not exceed the top or bot­tom of the Art board / Doc­u­ment Size.
  • Let all your Nodes / Anchor points fit the Grid / Guidelines.
  • Keep Snap to Grid on. When the draw­ings are moved over to Font­Lab will round the draw­ings off if it does not fit the grid.
  • If you think you need more pre­ci­sion recal­cu­late all the num­bers in the table with 2000 (instead of 1000) and increase the Illus­tra­tor doc­u­ment size accord­ingly. Also change the UPM in Font­Lab to 2000.

Prepar­ing 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 | Met­rics and Dimen­sions. Keep it like it is: Font’s UPM is: 1000
  • File | Font Info | Met­rics and Dimen­sions | Key Dimen­sions. Fill in the dimen­sions from the table like is shown here.

FLdimensions2

  • Go to Pref­er­ences | Gen­eral. Be sure “Do not rescale EPS files” is checked.

FLrescaleeps2

Import — Export

Now every­thing is ready to swap your font design between Illus­tra­tor and Font­Lab in both direc­tions. There are few options.

Copy the glyph in Illus­tra­tor or Font­Lab and paste it into Font­Lab or Illus­tra­tor. Works fine both ways in Illus­tra­tor CS and Font­Lab 4.6 and the glyph will stay pro­por­tional in either application.

You can also save an EPS out of Illus­tra­tor but it has to be exported as Illus­tra­tor Legacy EPS. Go: File | Export … Illus­tra­tor Legacy EPS in Illus­tra­tor CS. In CS2 it’s Save as … . Save as Illus­tra­tor 8 com­pat­i­ble file.

Indi­vid­ual char­ac­ters or glyphs can be exported out of Font­Lab and opened in Illustrator.

  • Share/Bookmark