Evaluating type is often a matter of taste and opinion, but there is an art and science to picking typefaces whose design is well-suited to a given project. Sometimes, though, even if the concept of a typeface is perfect, the execution is off. But how can you tell? Crack it open with a font editor and take a closer look. Here are twelve things to look for to help you judge font quality, so you can avoid choosing—or creating—fonts that suck, even though they might look interesting at first blush.1. Points, point placement and extrema
Fonts are designed as vector outlines in a Cartesian grid space. Don’t worry if you don’t know what that means—there won’t be a quiz later. The lines are described by points on the grid, and curved lines are additionally described by points around the curve that define its shape. The details are a little different between TrueType and PostScript outlines, but these features are shared between them.
Also shared between outline formats is the idea that every time a major curve changes direction relative to the X or Y axis, known as the local “extreme” of the curve, it should be described by an on-curve point. Any related off-curve points must line up perpendicularly to these on-curve points to create a smooth curve at these extremes. This “rule” isn’t necessary to make the font work, but it is needed for optimal rendering on screen.
Left is correct; on the right, red arrows point to the actual extremes, 2. Spacing
where there should be an on-curve point. Some errors are subtle to detect,
such as the topmost and leftmost points.
In fonts, each glyph is placed in a slot with a certain amount of space allocated to it, which generally includes white space on either side. The total horizontal space allocated to a glyph is its “advance width.” The distances between the furthest extent of each side of the glyph and the ends of the allocated space are the “sidebearings”—which can even be negative numbers, if part of a glyph sticks into a neighboring space.
At the high end of type design, spacing is an especially complex art and craft. But many junk fonts don’t even get the basics right, and that is easily detected. Decent spacing considers shapes and is consistent, meaning the “same” elements are given the same space across different glyphs, and similar elements are spaced similarly. So the left sidebearings of OCGQ and the right sidebearing of D are all usually either the same or very close.
Designing even spacing is about keeping a relatively consistent amount of white space between letters. In a typical sans serif font, a letter like O only needs 50–60% as much in the way of sidebearings as an H. Something like a T or a V might have sidebearings at or close to zero. Lowercase letters are generally spaced slightly closer than their cap brethren.
Bad spacing above; passable spacing below. The table indicates the size 3. Kerning
of each glyph, its total advance width and sidebearings.
It’s critical that the basic spacing is done well, but the font can also contain built-in kerning for particularly difficult letter combinations. Kerning is a set of adjustments to the default letter spacing of troublesome pairs that, without intervention, will be set too far apart (as with “AV”) or too closely (for example, in “f)” when the top terminal of the f collides with the parenthesis). Vast amounts of kerning are not always a necessity for a well-made font, but if there is no kerning, or if it does not deal with common situations like “LT” and “To”... then there is something wrong.
Now we get into the shapes of the letters themselves. In numerous ways, simply drawing something that is mathematically correct yields results that look wrong. Here are some guidelines for how letters need to be drawn in order to look right.4. Overshoot
Overshoot is the amount by which a round letter needs to exceed the height or depth of a flat letter of the “same” size in order to look the same. In a well-crafted font, you’ll see that the O generally exceeds the cap height and baseline of an H by about 1–2%. This allows it to appear to be the same size—if it was drawn mathematically correctly, it would look too small. Pointy elements like the sharp apex of an A only look like they are the right height when they are about 3% taller.
The top O has overshoot and looks the same size as the H.
The bottom O does not, and looks smaller than its H neighbors.
Even squares don’t need to really be square, by the way. A square looks square when it is about 1% taller than it is wide! The same is true of circles.