Making your first font with Glyphr Studio

Way back in 2010 I started to have an interest in crating my own font. After a little investigation I discovered that there was no free / open source typeface designer for Windows. FontForge, at the time, was Linux only... and all the other options were quite expensive. Since that time FontForge is now available on all platforms - if you are looking for an advanced typeface designer that is free and open source, I whole-heartedly recommend it!

2010 was also around the time that HTML5 Canvas started to become (somewhat) available. Since I couldn't find an affordable typeface design tool for Windows, I did what any Interaction Designer / JavaScript aficionado would do - I set out to create my own typeface design tool that was web-based. Glyphr Studio was born; it's focus is to make it easy for first-time typeface designers or hobbyists to create font files.

Before we begin

Glyphr Studio provides a large set of custom-designed vector editing tools for typeface design. So, it could be the only tool you need to create a whole typeface from start to finish. This tutorial, however, will start from a more common scenario. Many people have some glyphs designed in a different program like Adobe Illustrator or Inkscape, or maybe prefer to do their design work in those programs. Glyphr Studio has a powerful Import SVG tool, so this tutorial will go through setting up your external tool, creating glyphs in SVG format, then importing them to Glyphr Studio.

Step 1: Figure out your glyph metrics

To avoid headaches down the road, we are going to do a little work up front to make sure our graphic design space (a.k.a. Adobe Illustrator or Inkscape) matches our typeface design space (a.k.a. Glyphr Studio).

Glyphs (or characters) in a typeface exist in what's called an Em Square. Em's are the unit of measure for font files, but for simplicity you can think of them as pixels. Glyphr Stuido has a default setting of 1000 Em Units (which is very common for fonts, 2048 Em Units is the other common size) which means from the top of the tallest letter to the bottom of the descender measures a total of 1000 units. Most individual glyphs are not 1000 Em Units tall, or 1000 Em Units wide - but this Em Square is the default overall design space.

In typeface design lingo, these main measurements are called glyph metrics or key metrics. Here is a quick run-down, with Glyphr Studio defaults in parenthesis.

• Ascender (700 Em Units) distance from the baseline up to the tallest letter.
• Descender (-300 Em Units) distance from the baseline down to the bottom of the lowest letter. The size of the descender is usually shown as a negative number.
• Baseline - split between the ascender and descender.
• Cap Height (675 Em Units) distance from the baseline to the top of the tallest capital letter. Many times this is shorter than the overall Ascender.
• X Height (400 Em Units) distance from the baseline to the top of (not-rounded) lowercase letters.
• Overshoot (10 Em Units) the distance that rounded letters extend above or below guide lines. This is usually done to visually compensate between rounded letters and squared-off letters.

Glyphr Studio knows about all of these metrics. When we start to import SVG information later on, you can tell the import tool about overshoots, ascender heights, and descender heights... and Glyphr Studio will do the right thing when it comes to scaling and moving your shapes to the right place.

At the very least you should decide on an overall Em Square size (either 1000 or 2048) and also decide where the baseline falls within that square.

Step 2: Set up your workspace

The first decision for setting up your workspace is how to handle all the glyphs. The Basic Latin Character Range in Unicode has 95 characters - letters, numbers, and symbols. You don't have to design all of them, but there are a few main ways to handle all these glyphs:

1. Create a single artboard with 95 layers
2. Create 95 artboards to show all glyphs at once
3. Use one wide artboard to show glyphs side by side

The pros for #1 and #2 is that there may be some automated way to save single artboards or layers as individual SVG files. Glyphr Studio can import glyphs as individual SVG files, but it can also accept pasted SVG code as text. In practice, I've always opted for option #3 - I find that seeing all my glyphs side by side actually helps me design the glyphs themselves. Much of typeface design is about how a single glyph looks, but it is also very much about how all the glyphs look together.

So I would recommend the third option. This does assume that we can copy a subset of shapes in our document that correspond to a single glyph. Adobe Illustrator does this by default - if you multi-select shapes and copy them, you can paste them back in Illustrator as shapes... but if you jump over to a text editor or the Import SVG page in Glyphr Studio and hit paste, it will actually paste the SVG Code equivalent of the shapes you copied. Inkscape has similar functionality through a plugin called Object to and from String.

In all 3 cases you'll be making an artboard or document that is 1000px tall. The directions below are specifically for options #1 or #2, but the only difference for option #3 is making the width of the artboard or document really wide.

Adobe Illustrator

• Create a new document and set the units dropdown to Pixels and set Width and Height to 1000px. Or select the the artboard tool to adjust the dimensions of an existing artboard.
• Make sure the upper-left corner of your artboard is 0,0 - with the artboard tool selected the X and Y coordinates should be 0.
  • If you move the artboard later, be sure to re-zero the coordinates of the artboard. The artboard coordinates affect the position of the exported shapes.
• Make sure the rulers are visible either through the view menu or right-clicking the canvas. From the top ruler, drag down a guide line and place it at 700px - this will be your baseline.
  • If you select a guide, you can set it's Y value directly from the properties bar.
  • Optionally place guide lines for X Height at 300px and Cap Height at 25px (see note below about coordinate systems).
  • It's probably a good idea to lock your guidelines in place, either individually via the Layers Panel, or globally via Right Click > Lock Guides.

Inkscape

• Create a new document and go to File > Document Properties > Page (tab)
  
  • Under General, set the Display Units to px
  • Under Custom Size, first set the Units to px
  • Then set the Height to 1000 and the Width to 1000
  • Under Scale, set Scale x to 1, Scale y should automatically change to 1
  • If you expand the Viewbox section, X and Y should be 0 and Width and Height should be 1000
• From the top ruler, drag down a guide line and place it at 300px - this will be your baseline.
  • You can double-click the guide line to adjust it's Y value and to lock individual guides.
  • Optionally place guide lines for X Height at 700px and Cap Height at 975px (see note below about coordinate systems).
  • It's probably a good idea to lock your guidelines in place.

A note about coordinate systems

Measuring where things are is important to any design process, and unfortunately graphic design spaces are measured differently than typeface design spaces. Making Em Units equal to Pixels is a great first step to make things easier.

The origin of the coordinate system is a little more tricky. In the typeface design space the origin 0,0 is relative to the baseline, which is part of the way down the overall Em Square. So X=0 is the left hand edge, and moving to the right increases the X value. Y=0 is the baseline, so moving up from the baseline increases the Y value, and moving down from the baseline creates negative Y values.

In Adobe Illustrator, the 0,0 point is in the upper left, and in Inkscape, the 0,0 point is in the lower left. In the end, they both save as SVG (which has the 0,0 point in the upper left) so importing to Glyphr Studio works from both programs. Depending on what you use, you may have to do a bit of math to figure out where your various guides should be to match the glyph metrics in your font. The instructions in the previous section match the defaults Glyphr Studio uses, so that's a good place to start.

Step 3: Design your glyphs

This part is up to you! I would recommend starting with just a few glyphs - maybe 5 or so - and trying to go through the next export / import steps to get a feel for the overall process. There may be some quirks in your design tool or in Glyphr Studio that are better discovered and worked out before you've gone off and designed a hundred glyphs.

Right away you'll probably need to know how to create compound shapes. This is how you achieve a shape like an 'o' - this glyph is just two circles. Compound shapes are how we tell the design program we want the center of the o to be transparent.

• Adobe Illustrator - multi-select two shapes and either Right Click > Make Compound Path, or use the Pathfinder panel.
• Inkscape - multi-select two shapes and do Path > Combine, or press Ctrl + K

Step 4: Prepare your designs for import

Here are a few things you may want to do before jumping into Glyphr Studio's SVG Import page. In my typeface projects, I usually start with a design file. When I'm pretty happy with everything, I make a copy of it and call it something like flattened or export. In the copied file I can make all kinds of destructive actions, like remove guide lines or random shapes, flattening shapes, outlining strokes... basically all the stuff outlined below.

Flatten your glyphs

Many times it's easy to design glyphs using lots of shapes. For example, a Capital H is pretty easy to make with 3 rectangles. In a Font File, these same three rectangles are perfectly valid, but it's a best practice to try to minimize the number of shapes in your glyphs as much as possible. In the H example, those three rectangles can be combined to one path with 12 points.

Partially this is for font file efficiency, but there is also a very strange bug with certain programs that read font files - sometimes overlaps are shown as white at small font sizes... there is no way to fix this besides having a well-formatted font file to begin with.

Outline any strokes

Shapes in fonts don't have strokes with weights, they are just simple filled shapes. You may have used stroke weights on paths in your design file, but you'll need to convert these to shapes before you import them.

• Adobe Illustrator - Select the path and do Object > Path > Outline Stroke
• Inkscape - Select the path and do Path > Stroke to Path

Reset bounding boxes

In Adobe Illustrator, it's possible to rotate a shape and have that rotation be 'remembered'. You can tell these shapes if the bounding box is at an angle when the shape is selected. This, unfortunately, is read as a Transform in SVG, and Glyphr Studio does not honor Transforms.

If you have rotated shapes with rotated bounding boxes, Right Click that shape and select Transform > Reset Bounding Box. Your shape will look the same, but the selection bounding box should be at right angles.

Export Layers or Artboards to Files

If you are going the route of handling all your glyphs in layers or artboards then now would be a good time to run the script that exports individual SVG files. There is no native way to do this, so you'll have to find an Extension or Plug-in. A good place to start your search is either the official Inkscape Extensions page or the Adobe Illustrator Plug-ins page.

If you are doing Option #3 from the Step 2 above - directly copying shapes from your design program to Glyphr Studio - you can skip this step.

Step 5: Import to Glyphr Studio

By this point you should either have individual SVG files for each glyph you have designed, or you can copy/paste SVG code that corresponds to a single glyph.

It's time to head on over to glyphrstudio.com/v1/online and do the following:

• On the New Project page, give your project / font a name, then press Start a new font from scratch.
• By default you land on the Glyph Edit page, but go to the upper left hamburger menu (three horizontal lines) and navigate to the Font Settings page.
  • Review the Key Metrics and make sure they match your design dimensions. If you started with the default dimensions described in this article, no changes should be necessary.
  • Review the Glyph Ranges settings. By default Basic Latin is selected, but if you have additional glyphs you can enable those glyph ranges here.
  • After you're done, select Import SVG from the left hand navigation menu.

Importing SVG

There are three main sections to the Import SVG page:

• Glyph Chooser Panel - down the left hand side is a list and preview of all the glyphs in your font. The selected glyph here is where your imported SVG shapes will end up.
• Target Glyph, Scaling, Moving, and Metrics - The top of the right hand side shows the name of the glyph where the shapes will be imported. It also shows:
  • Scale - if selected, the imported shapes will be re-sized to fit the height metrics settings.
  • Move - if selected, the imported shapes will be moved to X=0, and moved up to a Y value based on the height metrics settings.
  • Height Metrics - the combination of these three Ascender / Cap Height / Descender checkboxes, and the two Overshoot checkboxes, describe the overall height of the glyph you are importing.
• SVG Code - this is where you can either drag and drop your .svg file on to the drop zone, or paste SVG code into the text box. Below the text input box is the final Import SVG button. Once your SVG code or file is uploaded, and your other options are selected, this button will import the code and add shapes to the selected glyph.

Some Notes

• Uncheck the Scale and Move options! All that work we did in steps 1 and 2 should mean your glyph data is ready to be imported without resizing or moving.
• Edit the Selected Glyph button will jump to the Glyph Edit page for the selected Glyph. Use this option to view the imported shapes up close to see if it's what you expected.
• Code is saved if you want to import the same shape to many different glyphs, you can. Either drop the file or paste the code, then select the first glyph target and press Import SVG, then select the second glyph target without entering new code, and press Import SVG again.
• Winding is important, that is the direction, either clockwise or counterclockwise, that your path travels. In graphic design, path winding is not important. But in typeface design, paths with different winding 'cut out' each other, or appear transparent in the regions where they overlap. Compound shapes should import to Glyphr Studio as paths with different winding - but if some glyphs seem like they should have transparent regions but don't, go check that path's winding. In Glyphr Studio this is called overlap mode and can easily be toggled back and forth in the Attributes panel.

Thank you!

If you have any questions or feedback, you can check out glyphrstudio.com/v1/help or just send me an email at mail@glyphrstudio.com.