Saturday, August 30, 2014

From typeface to font—part one: The em square

Up to this point, I have not technically been making a font, rather sketching a typeface design. Everyone has slightly different interpretations on what the two words mean, but generally, a typeface is taken to mean a design that may include multiple styles (regular, italic, bold, etc), and a font is a piece of software (or in the old days, a boxed set of metal type) that prints the letters in the shape of the typeface.

A font is a technical implementation of a typeface. The typeface is what we’ve been making so far. I used a simple vector drawing program (Inkscape), but you could use a pen and paper to sketch the glyphs too. But for an app like a word processor or web browser to use the letters we’ve drawn, the glyphs need to be digitized and packaged in a font file. Font files store the letters of the typeface in specific spots that apps know to look in to find that particular glyph. All modern font formats also include information on letter width and kerning (custom letter spacing), and some can do stuff like substitute ligatures and toggle on and off old style figures (we’ll get to those).

Before you can start putting a font together, though, you have to work out the em size. The em is the height of an imaginary rectangle than the letters of your font are mounted on. In the days of metal type, the em was an actual block of metal that had the letter on it (each metal block with its letter was called a sort). The em could be different sizes—an 8 point em would be half the size of a 16 point em, and the letter on the sort would scale with the em.
An actual piece of metal type (the fi glyph) from Garamond.
An actual piece of metal type (the fi glyph) from Garamond.
Credit Daniel Ullrich, on Wikimedia Commons
When you typeset text, you line up a bunch of these rectangles with the letters you want—digital or back then, metal—and arrange them in rows to form a paragraph. In metal typesetting you would put strips of lead in between the lines to space them out. Double spaced type would have strips that were one em high—the same as the height of the sorts. These strips were called the leading, pronounced “ledding”. It’s still called that today, except now computers insert virtual leading instead of actual metal strips to set the line spacing.
Text from Wikipedia
However, sometimes you might want to know how big the pieces of type used were—i.e. the English teacher who wants to know if a paper was set in twelve point type. If you know the leading, you can figure out the type size (the reason they ask for it double spaced), but otherwise, it is impossible to tell how big the original sorts were.

The reason for this is because you don’t know how big the letters on the metal type are relative to the body of the metal type itself. Two pieces of type from different fonts could both have a point size of 24, but the letter on one could be bigger or smaller than the letter on the other. So point size doesn’t necessarily translate to an absolute letter size.
Two metal sorts, with different size letters
Both sorts have the same point size, but the letter on the first one is half the size of the letter on the other.
A third sort could also have the same size letter as the second one, but have a different point size since it’s mounted on a different size body. If leading is added to the top and bottom of the smaller point type, it will print exactly the same size as the larger point type. The same thing happens with digital type, except instead of talking about a metal letter and the sort body it’s cast on, we’re talking about a vector outline drawn on an imaginary em rectangle.
If the letter size is the same, a smaller point sort with leading will print exactly the same as a larger point sort with no leading.
If the letter size is the same, a smaller point sort with leading will print exactly the same as a larger point sort with no leading.
To prevent this kind of thing from happening, it’s important to make sure that the letters of a font are a certain size relative to the em height. Type designers came up with some unofficial and vague norms for letter–em proportions, so that if you wanted to switch fonts, your text wouldn’t double in size. It's generally standard to scale the glyphs so that the descender of the ‘p’ more or less reaches the bottom of the em—called the descent line, and most capital accents are cut about in half by the top of the em—called the ascent line.
The proportions of Minion Pro compared to its em size
The proportions of Libertine compared to its em size
Of course, there are always fonts that deviate from the norms, like Merriweather, whose ‘p’ and capital accent marks overflow its em squares.

There’s some crap out there about the golden ratio and stuff, but personally I don’t buy it, and to scale my typeface, I’m just going to do the simple thing: match it to existing fonts. I took a copy of Linux Libertine, set it at 800 points, and scaled up my typeface to roughly match its x-height.

Part two will be on ascent and descent metrics and the specifics of importing glyphs into font design software.