OpenType feature tips: introduction

This is part of a set of posts on writing OpenType font features. This introduction is for people who don't design fonts and especially people who don't feel like they have a solid understanding of how text works in a computer. If that's you, read on. Otherwise, you'll probably get more benefit from heading straight to the other posts. Aside from this intro, each post is stand-alone and the set can be read in any order. Here's the full list of posts:


When you type text on a keyboard, it appears on the screen.

Of course, like everything to do with computers the truth is more complicated than that. That simple cause-and-effect is more like a four-step process:

  1. You press the “a” key on the keyboard.
  2. The computer records the input for the letter “a” as character data—the letter “a” is encoded as the number 61.
  3. The computer reads the font data to find the instructions for drawing the glyph at position 61.
  4. The computer draws the glyph on the screen; assuming it's a normal text font, the glyph should look like the letter “a”.

Older font formats like TrueType (TTF/.ttf) are pretty straightforward. The font's basically a table with two columns: data points (like 61) on one side and drawing instructions on the other. Your computer goes down the table looking for its data point, then gets the matching drawing instructions. Newer formats like OpenType (OTF/.otf) and the related webfont formats WOFF/.woff, WOFF2/.woff2) aren't so simple. In fact, they can get absurdly complicated (for a font, at least).

How complex could a font get? Someone put a short interactive Pokémon Gen 1 imitation in a font (Fontemon). People have made fonts that can convert decimal numbers to Roman numeral equivalents (e.g. “129” to “CXXIX”). For my part, I once made a font styled to look like it's drawn in a chunky marker pen (LilMrkr) that cycles between twelve different versions of each glyph to give it the feeling of real handwriting.

Those are pretty extreme, gimmicky cases, but it's not uncommon for OpenType fonts to have features like ligatures (several glyphs joined into one, like “fi” being redrawn so the dangling tip of the “f” is used as the dot of the “i” like this: “fi”) or small-caps (replacing lowercase letters with smaller versions of capital letters). In word processors or publishing apps, you can normally find the settings under a menu called e.g. “Typography” or “Font features”. In web browsers, you can control them in a CSS stylesheet using font-* properties like font-variant-caps or the generic font-feature-settings.

The features themselves are written in a simple code that tells your computer how to swap or change glyphs when you write text in that font. For instance, the following code swaps (substitutes, sub) lowercase letters for (by) small-caps:

sub a by a.sc;
sub b by b.sc;
sub c by c.sc;
...

This code tells the font that when the computer asks for the glyph for data point 61—the letter “a”—it should send the computer the drawing instructions for small-cap “a” instead of regular lowercase “a”. (The font internally calls the small-cap form a.sc.) This doesn't change the data point for the character! It just changes what the computer draws for that number. If you copied the small-cap “a” and pasted it in raw form somewhere (e.g. a browser address bar), it'd go back to looking like an ordinary lowercase “a”.

There are other rules, like many-to-one substitution or contextual substitution, but the code looks very similar to the code above.


Feature code is simple and many font features are straightforward, but a few are surprisingly hard to build because they're partly but not wholly open-ended. A feature like small-caps is very strict—you just replace lowercase letters (and, optionally, virtually all characters in the font) with small-caps forms. A feature like ligatures is very free—you just add whichever ligatures you think will work well in your font. A feature like case-sensitive forms is somewhere in between—you have freedom over what it applies to (often punctuation you want to align with upper- instead of lowercase letters), but it definitely can't apply to anything and everything.

The rest of this set of posts covers several features that fall in this awkward middle ground, as well as the code and glyphs needed for Gaelic type. Each set of advice is an amalgamation of sources I've read over several years of designing fonts—mostly from design blogs and the TypeDrawers forum, plus my own ideas. I just wanted to combine each group in one place, and figured it might help other people too.