Make fonts!

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.

glyph key metrics

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.

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

Inkscape

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.

Graphic Design vs. Typeface Design coordinate systems

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.

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.

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/online and do the following:

Importing SVG

There are three main sections to the Import SVG page:

Import SVG Page

Some Notes



Thank you!

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