approxequal
asciicircum
asciitilde
at
backslash
bar
brokenbar
currency
dagger
daggerdbl
degree
Delta
divide
equal
estimated
fraction
greater
greaterequal
infinity
integral
less
lessequal
litre (afii61289)
logicalnot
lozenge
minus
multiply
notequal
numbersign
Omega
onehalf
onequarter
paragraph
partialdiff
perthousand
pi
plus
plusminus
product
quotedbl
quotesingle
radical
section
summation
threequarters

Some of them you probably already have in your font, but most likely not all of them. The funny thing about them is that you can automate the making of these glyphs!

All you have to do is add a custom parameter called Add missing symbol glyphs. As Value, you can use 1, True or Yes. Or even Yes, please, if you want to express your gratitude for the quality lifetime you are just about to save. Do not leave the Value field empty, since that disables the parameter, just like using 0, False or No. The custom parameter has been implemented in Glyphs since the beta version 1.3.18.

That’s it! Glyphs will then apply the -adds option of the makeotf command it uses to generate fonts under the hood. This option fills in all the symbol glyphs from the list which are still missing in your font. The coolest thing about it is that makeotf will not only try to match width and weight of your font, but that the synthetic glyphs are already perfectly hinted.

Synthetic glyphs

‘What? Synthetic glyphs?!’ I hear you say. Yes, synthetic. Adobe’s Font Development Kit for OpenType (AFDKO), which is incorporated into Glyphs, comes with two Multiple Master fonts built in. These fonts contain all those symbol glyphs mentioned above. When you export a font with the Add missing symbol glyphs parameter, the weight and width of your font is measured and then applied to the masters, and the symbol glyphs will be synthesized and added to your font.

But how can the AFDKO find out both weight and width of your font? Let’s take a look what the user guide says:

It requires the glyphs zero and O to be present in the font, in order to determine the required weight and width.

So, make sure you have these two glyphs in your font, the figure zero and the capital Latin O. Then the magic can happen. But beware:

However, MakeOTF cannot stretch the MM font data to match very thick strokes, very wide glyphs, and it cannot match the design’s stem contrast.

But in most cases, it ought to work fine. And the glyphs are produced:

Hinting is a delicate subject. Some people say, it’s increasingly unimportant, or decreasingly important or whatever. And as far as anti-aliased font rendering goes on Apple devices, they’re probably right. Macs and iOS machines do roll their own hinting on the fly. Other systems, however, do still apply hints, at least up to a certain font size. Windows systems do, for instance, as do Adobe apps like InDesign and Acrobat. And if we’re going to hint our fonts, we might as well do it right.

For most cases, automatic hinting will do just nicely. But some letters may turn out to not align properly at low resolutions or simply look super-bad as opposed to nice and crisp. Here’s an example of an eight. The top row shows the autohinted glyph, which looks somehow distorted, especially in the middle rendering. In the bottom row, you can see the same eight, but this time manually hinted. Pay attention to how the figure is rendered more symmetrically and more upright:

Mind you, not every font can be hinted satisfyingly. Ideally, your font has traits as regular as possible, i.e. re-uses its stem widths a lot, all its overshoots have approximately the same size etc. If, however, you have a very irregular design, like a grunge-style font, or a scanned handwritten font, you may want to consider not hinting it in the first place.

Font-wide settings

First, we need to set standard stem widths and alignment zones in the Masters section of the Font Info. We already covered that in the blogpost about autohinting, so I am not going to repeat that here. All you have to make sure now is that all your overshoots and horizontal stems that need to be aligned reach into those zones, no more no less.

Autohinting

The first step now is to export the font (Cmd-E) with autohinting enabled. And then, you test your font in InDesign at low resolution, i.e. at low zoom levels. It’s a very good idea to use the Adobe Fonts folder for that purpose.

Inevitably, you will come across a few letters that just don’t seem to cut it. It’s these letters that we’ll have to hint manually. Very likely candidates: letters with diagonals.

Manually hint single glyphs

So, we go into those glyphs and have to do manually what the autohinter couldn’t do. Now concentrate:

First, make sure all extremum nodes are set. Perhaps you want to choose Layers > Add Extremes. You can also switch to the Path tool (P) and Shift-click on an outline segment to insert a node at the extremum.

Secondly, identify horizontal stems: Look for horizontal design elements that reach into an alignment zone, e.g. a serif, the crossbar of the t or f, or the upper curve of the o where it turns horizontal for a brief moment. For each such element, select both its top and bottom extremum nodes, right-click to open the context menu and choose Add horizontal hint. Glyphs will apply a horizontal hint encompassing the extremum points.

Thirdly, look for vertical stems. It’s the same story as with horizontal stems, only this time, alignment zones do not matter. Again, select two extremes, right-click and choose Add vertical hint from the context menu.

Ghost hints

Sometimes, a glyph reaches into a zone, but lacks that horizontal element that you so desperately want to hang a hint on. For these dramatic situations, the wise inventors of hinting invented ghost hints. In short, a ghost hint says, ‘Okay, there’s no serif here, but I’ll act as if I was one, and I’ll align myself to the alignment zone.’

You can add a ghost hint by selecting a top or bottom extremum node, and choosing Add Horizontal Hint from the context menu:

You can convert a horizontal hint into a ghost hint by right-clicking on the grey number badge next to the hint and choosing Make Ghost Hint:

There are ghost hints for bottom zones and ghost hints for top zones. The grey info badge at the bottom indicates which one you have at your hands. Just click on the word ‘bottom’ or ‘top’ and it will switch its orientation.

The classic example for this is an uppercase sans-serif I. First you add two horizontal hint. Then you turn them into ghost hints and make sure one is a bottom ghost hint and the other a top ghost hint. The ghost hints will show a blue circle which you can drag on one of the top or bottom nodes, respectively. Here’s what the ghost hints look like in an uppercase I:

This way you can make sure your sans-serif letters align properly with each other at low resolutions.

Note: before you make heavy use of ghost hints, please update to version 1.3.18 or later. The implementation of ghost hints has been largely improved in that release.

Export again

Now, when you export your font again, make sure autohinting is switched on. Autohinting will then be applied to all glyphs that do not have any manually set hints. This means that once you do choose to manually hint a glyph, you have to do all the hints, be it vertical or horizontal. Manually hinted glyphs and autohinted glyphs will then co-exist peacefully in the same font file.

Two words of caution: make sure your horizontal hints do not overlap each other. And also make sure your vertical hints do not overlap each other. So, for example, in the case of the figure eight in the screenshot above, we advise to only hint the lower bowl with vertical stem hints. This way, the upper bowl may become a little blurred through anti-aliasing, but it will stay symmetrical.

As of this writing, hint replacement is reserved for automatically hinted glyphs. So, avoid overlapping hints when you hint manually. In any event, it’s a good practice to keep the number of hints as small as possible. Only hint the most significant stems, leave out the details.

Multiple Master goodness

If you make sure you always attach the circle and the triangle to nodes, you only need to hint the first master. If your paths are point-compatible, which they need to be anyway, Glyphs will automatically apply the hints to all instances. Nice!

There are some usual suspects. For instance, when a glyph with a negative RSB is followed by a space and a glyph with a negative LSB, e.g. f space T, f space V and f space W. In these cases, the word space gets eaten up by the surrounding negative sidebearings. To a reader, the result may look like a forgotten space. So the white space needs to be increased a bit.

Or take the L quoteright A triplet, where the apostrophe (we assume quoteright will be used for the apostrophe) usually ends up too close to the A and too far away from the L. We need to fix that:

Typical triplets usually include space, punctuation and quotes, like period quoteright space. Also, it’s not necessarily always triplets, it can be quadruplets too, like f period space V etc. Of course, the mileage varies greatly depending on the design. The only way to find out which combinations you need is to have long texts set in your typeface, preferably with lots of punctuation in different languages, and look for spots where the white space seems messed up.

Contextual kerning lookup

Enter the kern feature. Glyphs actually creates it automatically for you at export time, using all the kerning pairs you created. Now, you can add some extra kerning on top of the existing kerning by adding a separate lookup to the kern feature.

To do that, go into Edit > Font Info > Features and add a new feature called kern by clicking on the plus button in the bottom left of the window. Now let’s assume we want to fix the triplets containing f space as well as the L quoteright A combo, which is important for languages like French and Italian. Okay, here’s what we put into kern:

pos f' 50 space [T V W Y];
pos L' -40 quoteright' 80 [A Aacute Agrave];

The first line looks for an f followed by a word space, but only before T, V, W or Y. Only in that case will the f space pair get an additional white space of 50 units.

The second line looks for an L, followed by an apostrophe and an A, with or without an accent. in that case, the apostrophe is shoved into the L by 40 units, while the space between the apostrophe and the A is increased by 80 units, effectively moving the apostrophe closer to the L, and increasing the space between L and A, preventing them from colliding with each other.

This is called a chaining contextual positioning with a marked subrun. If you’re familiar with AFDKO feature coding, the structure of the positioning rules may surprise you. The kerning values are not placed at the end of the line, but right between the names of the affected glyphs. Also, as with any contextual rule, some glyphs need to be marked with a ‘dumb quote’. In this case, we need to mark every glyph that is followed by a kerning value.

Technicalities

Under the hood, Glyphs adds a lookup called kernCustom to the end of the kern feature:

The sequence of marked glyphs, the ‘marked subrun’, must not be interrupted by unmarked glyphs. That means you can have x x' x' x' x but not x' x' x x' x'. Otherwise you get this error: ‘Unsupported contextual GPOS target sequence: only one run of marked glyphs is supported’.

And you cannot mix regular kerning with contextual kerning, because they are two different lookup types. If you do mix them, you will receive this error: ‘Lookup type different from previous rules in this lookup block’.

Two minor drawbacks

Since our lookup is feature code that gets injected into every instance at export time, the contextual kerning does not interpolate. But that is not much of a biggie, usually. Remember that the additional contextual kerning does not replace the other kerning pairs you already have, but it gets added on top of them.

Except for regular, non-contextual kerning, Glyphs does not give you GPOS preview in the edit view. That’s bad luck for us contextual kerners. But there’s an easy workaround: Just keep exporting your fonts to the Adobe Fonts folder and you can test your kerning triplets, quadruplets and quintuplets in InDesign right away. After all, this is where it counts because it’s where people are going to use it.

SAMPLE FONT: PLAYFAIR DISPLAY, COURTESY OF CLAUS EGGERS SØRENSEN.

This is important: keep in mind that the term kerning means adjusting the whitespace enclosed by a combination of two letters, a glyph pair. You cannot kern a single letter. Adjusting the left and right sidebearings of a single letter is called spacing.

Shortcuts

Okay, so you have optimized the sidebearings of your V and your A, but there is still too much whitespace in between them. This becomes apparent when you type a word like ‘VAND’, which, I believe, means ‘water’ in Danish and ‘sell’ in Romanian and Moldovan. I recommend you do not merely type the combination that needs adjusting, but also add some context, a few letters where the whitespace seems alright already. This way, you have direct comparison. And in this example, I think the space between N and D is pretty much alright already:

But it looks more like ‘V AND’ instead of ‘VAND’, right? So, if you agree, we need to do something about the space between V and A. In other words, we need to kern ‘VA’.

The easiest way to do so is to move the cursor between V and A, hold down the Ctrl and Opt keys and then adjust the kerning with the left and right arrow keys. Add Shift for increments of 10:

You may have noticed that, except for the additional Opt key, these are the same shortcut as for adjusting the left sidebearing of a letter, Ctrl-arrows or Shift-Ctrl-arrows. Being the logical people that we are, adding the Opt key to the RSB spacing shortcut, Cmd-arrows or Shift-Cmd-arrows, should result in manipulating the kerning to the right of the current letter. It actually does: Cmd-Opt-arrows or Shift-Cmd-Opt-arrows changes the kerning between A and N in our example.

Displaying kerning pairs

You can keep track of kerning pairs in the sample text by switching to the Measurement tool (shortcut L). Negative kerning will be shown in light blue, positive kerning in light yellow. Even though it is not necessary for the font in this example, I added positive kerning between N and D, so you can see what it looks like:

Also, in the grey info area (Cmd-Shift-I), you can see the kerning value in relation to the current letter. In this example, the kerning between the letter to the left of A and A itself is –80:

And of course, you can get an overview of all kerning pairs via Window > Kerning:

The kerning pairs are sorted by the left glyph. If you click on a right glyph, Glyphs will display the kerning pair at the current cursor position in the main window. If you have many kerning pairs, you can use the search field to quickly find the one you want. Click on the little triangle in the search field to get extra search options:

Group kerning

You probably want to Kern ‘VA’ just like ‘VÄ’, ‘VÅ’ and ‘VÀ’. And perhaps even like ‘WA’. In this case, you can put the glyphs into groups and use the kerning not just for the specific glyphs but for whole groups of glyphs. In this case, V and W would form one group, and A, Ä, Å and À would form another group.

How do we do that? Easy. Every glyph has two fields labeled ‘G:’ in its info panel (Cmd-Shift-I), meaning ‘Group’. Now, this is important: each glyph can belong to one left group and one right group. A good example is the capital Æ: on the left it looks like an A, on the right, it looks like an E. So we put it in the left A group and the right E group:

Now, pay attention to the lock symbols next to the ‘G:’ entries. If the lock is closed, this means that the kerning value applies to the whole group, not just the individual glyph displayed. If the lock is opened, then you have a kerning exception, i.e. the value only applies to that very glyph displayed, not the whole group. In this example, the kerning of A with the glyph to the left is a kerning exception, whereas the kerning of A with the glyph to the right of it applies to all glyphs in the A group:

You can apply kerning groups to multiple glyphs at once. Select more than one in font view (grid or list mode), and manipulate the settings in the bottom left of the window:

In grid mode, you can also invoke the context menu on a multiple glyph selection (right-click or Ctrl-click) and set the kerning groups there:

Of course, it is up to you how you want to sort your glyphs into kerning groups. But there is a very handy script that does a pretty good job of guessing the kerning groups for each side of each of your glyphs. You may need to adjust the results here and there, but it does get you pretty far. You can download the Set Kerning Groups script from Github and put it in the Scripts folder which you can access via Script > Open Scripts Folder (Cmd-Shift-Y). Holding down the Opt key, you can Script > Reload Scripts (Cmd-Opt-Shift-Y), then Set Kerning Groups will be accessible in the Script menu.

Importing kerning

If you have already set up your own groups in one font, and you want to have the same groups in your frontmost file, then choose File > Import > Metrics and pick the font file you want to copy the kerning groups from. The import function accepts UFO and Glyphs files. In the dialog that appears, pick whether you want to import kerning and/or kerning classes (another word for groups):

Kerning window

You can also copy and paste kerning via the kerning window. Just select the kerning pairs you want to copy (or simply select them all with Cmd-A), copy, switch to another font and paste them into the kerning window of that font. Kerning groups are displayed with a preceding at sign (@) and in blue, individual pairs in brown.

Take a look at the gear menu at the bottom right of the kerning window. There are two helpful functions hidden there: Clean up removes leftovers like kerning entries of letters that are not in the font anymore. Compress removes unnecessary kerning exceptions, e.g. the group kerning between the A group and the V group is –80, but you also have an individual ‘ÄV’ kerning pair of –80. Since that kerning exception makes no visible difference, the Compress function deems it unnecessary and will remove it.

SAMPLE FONT: PLAYFAIR DISPLAY, COURTESY OF CLAUS EGGERS SØRENSEN.

When doing the spacing of a Latin alphabet, it is a good idea to start out with n and o. Once those two letters have proper sidebearings, the rest is relatively easy. So, I recommend you type something like noononno and fiddle around with those sidebearings until you’re satisfied. You can check on the sidebearings of any glyph by taking a look at the grey info panel (View > Show Info, Cmd-Shift-I). They are marked with ‘L’ and ‘R’, respectively:

You can access the same values through the glyph info area in the bottom left of the Font tab. Or the LSB and RSB columns in list mode. You may need to activate the columns first via the context menu of the list header. You can rearrange the column order by dragging the column headers.

Whichever way you prefer, to change a sidebearing, just click into the number and type a new value. By the way, the bottom left info area even allows editing a selection of multiple glyphs at once.

Unless you did something really crazy, o needs equal left and right sidebearings. A good starting point is a third of the counter width. A little more if it’s for small sizes, a little less for display sizes, whatever you intend your font for. A little more if the bowls are rather flat (and thus leaving less whitespace on the sides, which needs to be compensated), a little less if the bowls are very round. Hint: loose spacing is easier than tight spacing.

Glyphs employs a set of intuitive shortcuts for changing the sidebearings of the current glyph. So, place your cursor in front of the o, hold down Ctrl for the left sidebearing or Cmd for the right sidebearing and then press the left and right arrow keys for decreasing or increasing the respective value. If you additionally hold down Shift, you get increments of 10.

Shortcut conflict

Careful: by default, Ctrl-arrows is reserved for switching between Spaces in OS X. Thus, you need to switch the Spaces shortcut to something else, so you can use it for Glyphs. To do that in Mountain Lion, go into your System Preferences, choose Keyboard, click on the Keyboard Shortcuts tab, pick Mission Control from the list on the right and double click Move left a space and Move right a space and enter new shortcuts. Personally, I like setting them to Ctrl-Opt-Cmd-arrows, but of course you can pick anything you like, just make sure it doesn’t interfere with other shortcuts you need:

Then, the n. Since the n usually has much less whitespace in its corners, we need to compensate that by enlarging its sidebearings. A good starting point is approximately 1.5 times the sidebearings of the o, not counting serifs. Serifs stretch into the whitespace, and thus effectively reduce the LSB and RSB values.

Also, the n is not symmetrical. The top right corner is a bowl, leaving more whitespace on the right than on the left. We need to compensate for that somehow. Now, here’s a cracker: If you combine Ctrl and Cmd keys, you simultaneously change both left and right sidebearings, effectively moving the letter inside its width:

This way, you can knock the n a little bit to the right a few times until the n looks centered between the o. You’re finished with n and o if the distances between all letters in noononno appear to be of the same size.

Placeholders

Now, we go on to the other letters. Something I like to do is to add a second line and type the letter I want to work on next, e.g. the h. But you want to see that letter between the o’s just like the n before. You can do that in Glyphs: just go through the string and replace all occurrences of n with a placeholder. You can ‘type’ a placeholder with the Edit > Add Placeholder command (Cmd-Opt-Shift-P).

A placeholder always displays the current glyph, i.e. the glyph right after the cursor. Watch out, the placeholder can act weird if the cursor is all the way at the end of the test text you entered. If that happens, just move the cursor back in front of another letter.

Sidebearing arithmetics

But wait a minute, h should be easy if we already have the n. In most cases, it can have the same sidebearings as n, because, except for the ascender, h and n look pretty much the same. So, for instance, we could go check on the n and copy the sidebearings into the grey info area (Cmd-Shift-I) of h. But that’s suboptimal, because what happens if we later change the sidebearings of the n again? Do we really want to keep track of all the sidebearings manually? Hell no.

What we do is this: instead of entering a number value indicating the sidebearing distance, we enter the name of another glyph! Glyphs will then reduplicate the other letter’s sidebearing in the current letter. So, we enter n in both the LSB and the RSB of n, and h will dynamically take over the sidebearings of n:

Not 100 percent dynamic though. Every once in a while, it’s a good idea to force the selected glyphs to update their sidebearings by choosing Layer > Update Metrics (Ctrl-Cmd-M).

But it doesn’t stop there. You can even do simple arithmetics. In that case, you start the LSB/RSB entry with an equals sign (=) and hang your calculation in there. So, if you use =a+20 as the LSB value for a glyph, Glyphs will take the LSB value of a and add 20 units to it. If you use =|a+20 instead, i.e. you put a pipe character (|) in front of the glyph name, then Glyphs will take the opposite sidebearing of a as the basis for the calculation. You cannot just add, you can also subtract: =b-10. And multiply: =c*1.1. And divide: =d/2. In our experience, simply adding and subtracting fixed values works best for most situations.

Again, don’t forget to regularly run the Layer > Update Metrics command (Ctrl-Cmd-M). So, look for similarities in lettershapes, try to establish connections between letters and try to turn that into sidebearing arithmetic like this:

• LSB =o: c, d, e, g, q
• RSB =o: b, p
• LSB =n: b, h, i, k, l, m, p, r
• RSB =n: a, h, m

Etcetera etcetera etcetera. Your mileage may vary greatly though, because eventually, it will depend on the way you design your glyphs.

Uppercase spacing

For uppercase spacing, the base characters are usually H and O. It’s basically the same story as with the small letters above: get those two right and you’re good to go. But this time, you also need to make them fit to the lowercase letters. If you take care of this, you can easily transfer sidebearing values to other letters:

• LSB =H: B, D, E, F, I, K, L, M, N, P, R
• RSB =H: I, M, N
• LSB =O: C, G, Q
• RSB =O: D, Q

Etcetera etcetera etcetera.

Automatic alignment

Component-based letters inherit their spacing from the base component. For example, you want an ‘ä’ in your font. So you build an adieresis with an a component and a dieresis component. Actually, Glyphs does that automatically for you if both a and dieresis already exist in your font when you generate adieresis. Now, go into the adieresis glyph and click on one of the two components. It appears to be locked, or as we say, automatically aligned. In most cases, that’s probably exactly what you want. Trust me, there’s nothing more tedious than trying to synchronize the spacing of all diacritics manually.

Sometimes, however, that’s no what you want. For instance, when you create the ldot, chances are you do not want the components to align automatically. In cases like this, you open the context menu on the component(s) you want to reposition, and choose ‘Disable Automatic Alignment’. If you change your mind, you can ‘Enable Automatic Alignment’ via the same menu.

Non-letter glyphs like punctuation, figures and symbols do not align in the first place. This way, you can quickly and easily make proportional and tabular figures in one go.

No kerning yet

Try to get as far as possible without kerning. At one point, you will find that you cannot improve your spacing anymore by tweaking the sidebearings. Then you can start kerning, but no sooner, really. That’s because you’d have to start with the kerning all over again once you find a better way of spacing your letters.

Characters versus glyphs

Type designers create new glyphs, i.e. pictures representing characters. Type designers usually do not create new characters, i.e. the meanings of those pictures, or, more technically put, ‘the smallest component of written language that has semantic value.’ We don’t invent alphabets, we merely re-interpret existing ones. (Okay, sometimes, we do invent new alphabets, but that’s a different story. Keep calm and continue reading.)

In short: characters are what you type, glyphs are what you see.

One glyph usually corresponds to one character, be it a letter, a figure or a punctuation sign. Characters have Unicodes. The glyph-character relationship is expressed by the Unicode value associated to the glyph. Glyphs displays the Unicode value in various ways. For instance, in Font View, you’ll find it right next to the glyphname:

A glyph can also represent more than one character at once. Take an f_f_f ligature as an example. It represents three f characters in a row. Ligatures do not have Unicodes, because the separate characters already have codes and the the fact that it’s a ligature does not change the meaning of its parts. (Well, actually, some ligatures do have legacy codes, but solely for backwards compatibility with outdated encodings from the long-gone, dark ages of eight-bit computing. E.g. f_f can have the U+FB00 LATIN SMALL LIGATURE FF code point. If ‘eight-bit’ does not tell you anything, please erase everything you read within these parentheses from your memory immediately, keep calm and continue reading.)

Sometimes, a glyph only serves as a part for other glyphs. You can, for instance, use separate glyphs for your serifs. So, to sum up, a glyph is a picture, either of a character, or of many characters or as a part in other glyphs. And type designers draw such pictures.

Unicode, planes and blocks

Over the centuries, the alphabet has become more complicated than the regular a to z. First, we have all sorts of diacritics, special letters, (almost) everything in both upper- and lowercase. Then, there’s much, much, much more than just the Latin script. Plus hundreds and thousands of symbols, figures, punctuation signs et cetera et cetera et cetera.

So, to cut a long story short, we need a way to keep track of everything. Something like a huge table for all characters of all scripts, essentially everything you could possibly ever want to enter as a part of a text anywhere. Well, this is called Unicode.

Unicode is a table that maps codes to symbols and a bunch of metadata. There are different ways to represent the individual codes (known as Unicode transformation formats or UTF), and Glyphs uses the hexadecimal UTF-16 convention. Hexadecimal, in case you did not know, is counting with 16 instead of the usual 10 digits. We just use the letters A through F as additional digits, so we count like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, and so on, you get the idea.

Unicode has seventeen planes of 65,536 characters each, the most important being the Basic Multilingual Plane (BMP or Plane 0) ranging from U+0000 to U+FFFF and the Supplementary Multilingual Plane (SMP or Plane 1) from U+10000 to U+1FFFF. Planes are subdivided in many character blocks, usually comprising a script, e.g. Tamil from U+0B80 to U+0BFF or something funny like Emoticons (starting at U+1F600).

Not all (17×65,536=) 1,114,112 code points of Unicode are currently in use. At the time of writing, the latest Unicode standard was version 6.2 from September 2012 with 110,117 characters. Some parts of Unicode are intentionally left free for private use. Unicode knows three such Private Use Areas (PUA), the most important one ranging from U+E000 to U+F8FF.

For unofficial scripts that are unlikely to make it into official Unicode, like Klingon pIqaD, geeks have come up with the ConScript Unicode Registry which makes use of the Private Use Area.

Unicode and Glyphs

In Glyphs, you usually do not need to worry about Unicodes, since Glyphs determines the right code (or the lack of a code) by the glyphname. Open Window > Glyph Info (Cmd-Opt-I) and look for specific glyphs by typing (part of) a glyph name in the search field:

Glyphs has a built-in database of predefined glyphnames. You can add your own definitions if you are so inclined. The Glyph Info window displays name, Unicode (if available) and some metadata about each glyph. Starting in Glyphs version 1.3.18, you can quickly add a glyph to your font by selecting it and pushing the Add to Font button in the bottom right corner.

If you resize your Glyph Info window, you can even see the very handy decomposition information for the individual glyphs:

For example, if you plan to add adieresismacron to your font, make sure you have a, dieresis and macron already in your font. Then Glyphs can use them as components for adieresismacron and build the complete glyph right away. Cool.

If you plan to add a glyph that has no entry in the Glyph Info window, you can use the uniXXXX scheme for relating it to a character in the Basic Multilingual Plane. The XXXX stands for the four-digit UTF-16 hexadecimal code. Use uXXXXX for any of the higher planes, i.e. just a u instead of uni. Glyphs will then automatically add the proper Unicode.

Keep in mind that not every glyph needs a Unicode. Especially if the glyph is invoked via an OpenType feature, there is no need to encode the glyph. You only need a code if you need to type it directly. For example, you do not need to encode small caps or a stylistic variation of a letter, since the user will type his or her text in plain upper- and lowercase, and then activate the appropriate function of the software he or she uses.

Double mappings

If you have some experience in type design, chances are you have come across double-mapping of glyphs. That means that one glyph, is associated with two different Unicodes. This is bad. Don’t do it. There’s a whole lot of technical problems that comes with this practice. That’s why Glyphs doesn’t let you do it. To tell you the truth, Adobe’s makeotf doesn’t let you do that either. Since Glyphs relies on makeotf under the hood, it wouldn’t make any sense anyway.

But what if you do want two Unicodes for the same glyph? Take, for instance, the Delta glyph, which is both a Greek capital letter (U+0394) and a mathematical symbol (U+2206)? In cases like this, take a look at Window > Glyph Info (Cmd-Opt-I) and look for the Unicodes you want to apply:

You will quickly find out that the mathematical symbol is called increment while the Greek letter is simply called Delta. If you want both to have the same shape, draw Delta first, and then choose Font > Add Glyphs… (Cmd-Shift-G), type Delta=increment and hit the Generate button. This will create a glyph called increment with a Delta component in it. Metrics are automatically linked unless you disable automatic alignment.

More generally put, if you want to reuse the same shape for two different Unicodes, add a component-based copy of the glyph using the firstGlyphName=secondGlyphName and make sure you give both glyphs their proper names.

UnicodeChecker

Glyphs can interoperate with a shareware tool called UnicodeChecker from the great people at Earthling Soft. UnicodeChecker helps you quickly find all the info you need about characters. To invoke UnicodeChecker, click on the little arrow next to the Unicode in the grey info area:

Glyphs will then send the code of the current glyph to UnicodeChecker, which in turn will tell you all sorts of useful information about the character in question:

UnicodeChecker is also useful for quickly finding all characters related to a script. For instance, if you really want to cover all Latin characters, switch to UnicodeChecker and in the Character Blocks > Alphabetically: Ideographic-Lydian submenu, you will find all Latin blocks:

If you haven’t installed UnicodeChecker yet, Glyphs will prompt you to do so when you click on the arrow. Downloading and installing UnicodeChecker is free. However, if you do use it on a regular basis, think about how much time and nerves this little tool saves you and consider a donation to the makers. Support shareware, it supports you.

Inside the Glyphs application, there is a file called GlyphData.xml. You are not supposed to touch the one inside the app, but you can make a copy of it in the Application Support folder and keep your personal customizations there. Glyphs will use your glyph info to override the built-in settings.

Make a copy of GlyphData.xml

We have to dig into the application and fish out the XML file. To do that, we first copy this line into the clipboard:

/Applications/Glyphs.app/Contents/Frameworks/GlyphsCore.framework/Versions/A/Resources/GlyphData.xml

Then, in Finder, choose Go > Go to Folder… (Cmd-Shift-G). Paste the line we just copied into the appearing dialog:

Hit Go and the Finder will show you the GlyphData.xml, buried somewhere in the Glyphs application:

ATTENTION In Mac OS X versions prior to 10.7, you cannot directly go to the file using the full path as described above. Instead, you have to navigate to /Applications/Glyphs.app/Contents/Frameworks/GlyphsCore.framework/Versions/A/Resources/ and then look for a file called GlyphData.xml and select it by clicking on it once.

While the XML file is selected, choose Edit > Copy GlyphData.xml (Cmd-C). You can close the Finder window now.

Now, we have to navigate to the Application Support folder. Since the regular version and the App Store version must use different locations for that purpose, the easiest way to get there is to choose Script > Open Scripts Folder (Cmd-Shift-Y) in Glyphs. This will take you to the Scripts folder inside the Application Support folder. All you need to do is make sure you are in the enclosing folder. Next to the Scripts folder, you should see Temp and Plugins folders as well as a CustomFilter.plist file. If you do not see an Info folder there yet, it’s time to create it (Cmd-Shift-N). Inside, the Info folder, paste the GlyphData.xml:

Editing the GlyphData.xml

Open the XML file with your favorite XML or plaintext editor. Personally, I recommend TextMate, but you may also be happy with BBEdit or its free counterpart TextWrangler.

Both XML files, the one buried in the app as well as the one we just copied into the Info folder, contain all relevant glyph info. They compliment each other, so you can limit your copy of the XML file to just the letters you need. To do so, remove everything between <glyphData> (should be located around line 20) and </glyphData> (the last line). So you end up with something like this:

Now, an entry for a letter must adhere to a certain form. Let’s take an example. Imagine you want your p to have a top anchor by default, so you can build pacute (U+1E55) and pdotaccent (U+1E57). We have to add this line to our copy of GlyphData.xml:

<glyph unicode="0070" name="p" category="Letter" subCategory="Lowercase" script="latin" description="LATIN SMALL LETTER P" anchors="top" accents="acute, dotaccent" />

Now, it should look like this:

You see, it’s an XML element called glyph. The basic structure is:

<glyph attribute="value" />

As you see, each glyph element can take various attributes of the structure attribute="value". Okay, let’s go through the various possible attributes:

• unicode="0070" is the hexadecimal Unicode value. Use unicode="" if you want to create an unencoded glyph like a ligature.
• name="p" is the name of the glyph. Glyphs recognizes your glyph by its name, so this must be set to a valid glyph name.
• category="Letter" is the category or group of the glyph. Possible values are: Letter (letters like ‘x’ or ‘ä’), Number (figures like ‘3’), Mark (e.g. the acute mark), Punctuation (like the period or the comma), Separator (like the wordspace), Symbol (like the Emoji signs, arrows or the Radioactive symbol).
• subCategory="Lowercase" helps you further define the kind of the glyph. This, of course, depends on the category. This could be Fraction for a Number or Lowercase for a Letter etc. Take a look at Window > Glyph Info for possible sub categories. Roughly, categories and subcategories are what you see in the sidebar of the Font tab.
• script="Latin" defines the scripting system the glyph belongs to. Can be empty if it doesn’t belong to any script (e.g. for math symbols). Possible values include arabic, cyrillic, devanagari, ethiopic, greek, han etc. You get the idea.
• description="LATIN SMALL LETTER P" is the Unicode-style descriptive name of your glyph. If you have an encoded glyph, you can find the official name with Unicode Checker.
• anchors="top" is comma-separated list of possible diacritical anchors for the glyph. The standard anchors are top, bottom, center, ogonek, topleft, topright, bottomleft, bottomright. Corresponding mark anchors need preceding underscores, e.g. _top. Stackable combining marks can have both kinds of anchors. Omit this attribute if your glyph cannot be a base letter for a diacritic.
• accents="acute, dotaccent" defines the possible accents the glyph can take. This mainly helps Glyphs draw the mark cloud when you click on an anchor.

Additionally, you can make use of these attributes:

• unicode2="FE80" can define an alternative Unicode value. Many Arabic letters have double ecodings. For instance, hamza-ar defaults to unicode="0621", but since the glyph hamza-ar corresponds to the isolated form of the letter, you can add the alternative encoding of the isolated form, unicode2="FE80".
• legacy="uni021A" describes the legacy Adobe Glyph List name if you do not want to use it because it’s not as human-readable as the name you want to employ for the glyph in question. You probably want to make use of this attribute wherever the AGL uses uni followed by the 4-digit Unicode or u and the 5-digit code. E.g. the glyph element for Romanian and Moldovan Tcommaaccent has both a name="Tcommaaccent" and a legacy="uni021A" attribute. This info helps your glyph data to stay more compatible with other encodings and is used when you choose Font > Update Glyph Info.
• decompose="a, dieresis" defines the base glyphs of a component-based glyph. In other words, the parts that make up the glyph. This information is used when you construct such a letter using the Layers > Make Component Glyph command (Cmd-Opt-Shift-C). Make sure the base letter comes first and all the diacritics follow. This is also useful for ligatures. In that case, you add the names of the glyphs that comprise the ligature, e.g. decompose="f, f, k" for a f_f_k ligature.
• sortName="j_": by default, Glyphs orders the glyphs alphabetically within their category. If you want to manipulate the display order, add this attribute. For instance, to make sure that dotlessj comes after j instead of d, there’s a sortName="j_" attribute in it. This is very important for figures, where the sortName can look like Number.dnom.4 etc.

Potential pitfalls

Be careful and precise. If you mess up your glyph data, you will run into problems. Here are a few common problems, so you can avoid them right from the start:

First, make sure you always fill out Category. Always.

Secondly, always fill out subCategory. If you don’t know what to fill out, use subCategory="Other".

Thirdly, never, I mean never ever, use an existing glyph name in legacy. For example. you must not use legacy="Tcommaaccent" for Tcedilla because Tcommaaccent already exists elsewhere in your glyph data. The proper legacy name in this case would be uni021A.

Hard times for the feature generator

It is seductive to to create your own naming schemes with this trick. But keep in mind that Glyphs expects certain names for automatically building OpenType features. So, you may have to write your own feature code as well, once you roll your own glyph data.

Keep your XML tidy

This is important: Glyphs may ignore your custom glyph data if your GlyphData.xml contains broken XML. So, make sure you properly validate your XML from time to time. Many tools like TextMate sport a built-in validator. You can, of course, also copy and paste your XML into a web-based validator such as the W3 Markup Validation Service.

That’s all there is to injecting your custom info into Glyphs. If you feel that other people could also profit from your additions, you can put your GlyphData.xml file on Github, post a suggestion in the Glyphs Forum, or, if you really, really think your changes should be the default for every Glyphs user, file a feature request.

Update 2013-02-03: added note on how to navigate to GlyphData.xml in 10.6 (thanks @typefacts); two minor text improvements.

Update 2013-02-12: added ‘Potential pitfalls’.

Update 2013-03-25: corrected XML file name typo (thanks George Thomas).

So let’s collect all different sorts of serifs, put them into separate glyphs and insert them into other letters as components.

Different kinds of serifs

A serif is not a serif is not a serif. There is not even much consensus as to what one serif actually is. For instance, in a serif n, some people count three serifs, others count five. For technical reasons, we will count five as well:

Now, we can build five different serifs, three of which you already see in the above picture of the n. The spur at the top left, and at the end of each stem both a left and a right serif. Which are the other two? We still need two vertical ones, like here in s and z:

Building the serifs

To cut a log story short, fire up your Font > Add Glyphs dialog and copy and paste these five lines

SerifBottomLeft
SerifBottomRight
SerifSpur
SerifUpLeft
SerifUpRight

Here’s the deal. All serifs somehow attach to some sort of stem. Now imagine the origin point (where left sidebearing and baseline cross) represents the part of the stem the serif connects to.

I know, that sounds complicated. So let’s just draw the SerifBottomLeft:

It is the serif that sticks out to the left of the stem. So we imagine that the left sidebearing is the left side of the stem, and the baseline the bottom of the stem:

To be on the safe side, we’ll have a little overlap, because sometimes the stem is not completely vertical (think of an uppercase A, for instance). Slightly slanted because… well, we’ll see why later. Hold on, first we get the others right.

Here’s SerifBottomRight:

Again, the LSB is the side of the stem, but this time we have the serif that sticks out to the right, like so:

So the overlap has to be to the left of the origin point.

Next up, SerifSpur:

Oh my god, what happened here? Why did this one go below the baseline? Easy. Since the spur attaches to the top of a stem, and that top is (like the bottom) represented by the baseline, the spur must bump against the baseline from below. Just like it bumps against the top of the stem – from below:

Okay, now for the vertical ones, let’s take a look at the bottoms of s and z. This is how the vertical serifs attach to the stems here:

As you can see, it’s the lowest tip of the serif that actually attaches. So, this tip needs to stick in the origin point. Here is the SerifUpLeft as seen in the bottom left corner of the s:

…and the SerifUpRight as in the bottom right corner of the z:

Aligning components

Why all this fuss about the origin point? Because in Glyphs, you can select a node and a component, then choose Layers > Align Selection and the origin point of the component will align with the point.

This is great news for us, since we want to precisely move serifs onto corners of stems. So here is what we do:

1. Into the yet unseriffed letter, add the serif component with Layers > Add Component (Cmd-Shift-C).
2. Then, select the corner node of the stem we want to attach the serif to. You can drag-select the point or you can just click on it.
3. Shift-click the component to add it to the selection. Both the corner node and the component should be selected now.
4. Align them with Layers > Align Selection (Cmd-Shift-A). The component should fly onto the stem.

That’s it. Select a node and the component, align, and you’re done. Cool.

Turning components upside down

Sometimes, we need to turn a component, for instance for the top right stroke ending of the s. We cannot mirror components because this would mess up our path orientation and we don’t want that, do we.

What we have to do to turn them upside down is rotate them. Go to your Palette (Window > Palette, Cmd-Shift-P) and set your rotation value in the Transformations section to 180 degrees.

Alternatively, you can press both the horizontal and the vertical mirror button. Both methods yield the same result. In any event, you can copy the component, rotate it and align it again, like in the s:

Note the h and v values in the grey info box. ‘h:–100%, v:–100%’ indicates a 180° turn.

Taking advantage of component serifs

Now you can go ahead and experiment with your serif shapes. Have fun!

Now you can enter glyph names as they appear in the Glyph Info panel, like germandbls, five, guillemetleft. Or you can enter the actual character, like ä or à, and Glyphs will add a glyph with the proper glyph name, in this case adieresis and agrave. The command even recognizes ligatures, so you can enter t_t and you get a ligature glyph called t_t with two t components in it. You can enter many glyph names at once, separated by spaces or carriage returns. This way, you can copy and paste complete glyph lists you keep around in text files, and you can create many glyphs at once.

Single component recipes

The really cool stuff, however, are recipes. A recipe is a string containing an equals sign, e.g. six.numr=six.sups. Glyphs tries to make a component of what’s left of the equals sign. What’s right of the equals sign is the resulting glyph name. So, in the example of six.numr=six.sups, Glyphs will create a glyph called six.sups and inject a six.numr component.

Think of the possibilities. Imagine you want to build an uppercase-only font. You could enter something like this:

A=a B=b C=c D=d E=e F=f G=g H=h I=i J=j K=k L=l M=m
N=n O=o P=p Q=q R=r S=s T=t U=u V=v W=w X=x Y=y Z=z

This creates lowercase letters a-z and inserts the caps A-Z into them, but as components! This way, upper- and lowercase letters will always stay synchronized. Cool.

Multiple component recipes

Enter the plus sign. Take a look at these recipes:

d+caron.alt=dcaron
t+caron.alt=tcaron

This takes the d or t component respectively, adds the caron.alt component and creates the glyphs dcaron and tcaron. Please note that in both cases, the second glyph is a diacritical mark. And if all the glyphs involved carry corresponding anchors, Glyphs can build proper diacritics right away. This comes in handy if you have to build lesser-known diacritics like the Czech dcaron:

In most cases, the built-in recipes will do nicely. And you only need to write the glyph name and Glyphs figures out the rest. E.g. if you enter edieresis, Glyphs will build it from e and dieresis components. You can take a look at the built-in recipes in the Components column of Windows > Glyph Info. If you do not agree with the pre-cooked recipe, you can roll your own with the plus sign.

Let’s take it one step further:

s.sc+s.sc=germandbls.sc

In this case, the second glyph is not a diacritical mark, but a regular letter. This means that, in this example, Glyphs will insert two s.sc next to each other, forming a smallcap double s, built from s.sc components. This is what germandbls is supposed to be turned into when switching to smallcaps, at least according to official (prescriptive) German orthography:

To sum up, using recipes, you can add two glyphs to create either a diacritic or a digraph. And the best thing about it is that the resulting glyph will be made of components.

SAMPLE FONT: ALENA, COURTESY OF ROLAND STIEGER.

The magic triangle

This is important: every curve segment should fit nicely in a triangle.

‘What’s a segment?’ I hear you ask. Simple, it’s everything between two adjacent on-curve points a.k.a. nodes. There are two types of segments, straight lines and curves. Straight lines only consist of those two nodes. Curve segments additionally sport two off-curve points a.k.a. Bézier control points (BCPs) or ‘handles’.

It’s important to note that the magic triangle is described by the two nodes encompassing the segment and the point where the elongations of the handles intersect. This means that the handles must never extend outside the triangle. If they do, you may want to reconsider the position of your nodes. So these two things should not happen: a handle crossing the other handle, and a handle crossing the elongation of the other handle. This may produce unnecessary inflections, double-inflections, cusp curves or even self-intersections, all of which may put a rasterizer into trouble.

This may come as a surprise to you if you have prior experience in vector applications like Illustrator. First, the handles do not belong to the nodes, but to the segment. Secondly, a curve segment always has two BCPs, never just one. Illustrator seems to let you draw curve segments with only one BCP. But actually, what Illustrator really does is hide the second BCP in one of the surrounding nodes. This is pretty bad because in font vectors, no two points should share the same coordinates. Plus, you have more control over the path if you make good use of both BCPs.

If one of the BCPs appears to be missing, it’s hiding in the node next to it. The easiest way to fix this is to select a point in the vicinity, be it a handle or a node, and then tab to the hiding handle. Use Shift-tab to go into the opposite direction. A light-grey highlight indicates that the handle is selected. Now, use your arrow keys to drag the handle out of the node. If you add the option key, your handle will keep its direction. Hold down Shift for increments of 10:

The triangle rule also implies that a curve segment should only have a single orientation, i.e. not switch from clockwise to counter clockwise. There are, however, exceptions to this rule. Very often, you’re better off with a double inflection when drawing glyphs like an S or a tilde, especially if it’s only a small path movement. When you draw cupped serifs, you even need to have double inflections:

Make sure Points A and C are on the same height, all the BCPs are horizontal, and the distance between the base and B is less than 20 units. Set your postscriptBlueShift custom parameter to the depth of your cups plus one. Then the autohinter can apply a so-called flex hint.

Path orientation and order

Wrong path directions can mess up counters. Paths need to be oriented counter-clockwise, counters need to be oriented clockwise. You can control path directions by selecting paths, right-clicking and picking Reverse Selected Contours from the context menu. Don’t wanna keep that in mind? No problem. Glyphs can do that for you. Just pick Layers > Correct Path Direction (Cmd-Shift-R) and you’re done. This command also works on multiple glyphs, or even the whole font.

By the way, Layers > Correct Path Direction (Cmd-Shift-R) also re-orders your paths and resets the starting point in each closed path. You can quickly cure most interpolation problems by running this command in each master.

Self-intersection

A path in a font must not intersect itself. You can fix a self-intersection by selecting the contour in question and choosing Filter > Remove Overlap (Cmd-Shift-O).

Sometimes, of course, you will want to insert an intersection for design purposes. In this case, make sure you activate Remove Overlap when you export your font (Cmd-E).

Superfluous points

Not really a biggie, but it can improve the rendering performance of your font: Layers > Tidy Up Paths (Cmd-Opt-Shift-T) will remove superfluous nodes and BCPs. This command will also fix the type of your nodes, thus changing a blue corner point into a green curve point (or vice versa) where necessary.

Extremum points

While we’re at it, a lot of stuff is much easier if you insert nodes at the x and y extremes of your paths. Very often, this allows you to get rid of the other points while achieving simpler paths, fewer points, smaller file sizes.

You can either choose Layers > Add Extremes to add extrema to the selected outlines, selected glyphs or even the whole font. Or, if you want to have more control, just take your Pen tool (P) and Shift-click on the path. Glyphs will look for the nearest extremum or inflection point of the curve and insert a node there.

After you inserted extremum points, you can often get rid of intermediate points without compromising on the shape:

Open and closed

Did a whole path go missing in the final font? Perhaps it was open. Open paths are ignored at export time. So, all paths should be closed.

To close a path, just drag one of the open ends onto the other one with your Edit tool (V). Or switch to the Pen tool (P) and subsequently click on both end points to add a closing segment.

Vectors out of bounds

Got super-weird left or right sidebearing values? You probably have some object way off the visible part of your glyph. Here’s how to get rid of it:

1. Make sure the right glyph is active, i.e. the cursor is placed before it.
2. Switch to the Edit tool by clicking on the arrow symbol in the toolbar.
3. Choose Edit > Select All (Cmd-A). All paths in the glyph are selected now.
4. While simultaneously holding down your Shift key, drag a rectangle selection across the parts you want to keep. This will deselect them. Now, only the out-of-bounds debris remains selected.
5. Hit the Delete key.

Now is a good time to go through your glyphs and optimize the vectors. Trust me, it will save you some hassle later.