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, where there should be an on-curve point. Some errors are subtle to detect, such as the topmost and leftmost points.
2. SPACING 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 of each glyph, its total advance width and sidebearings.
3. KERNINGIt’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.
5. SHARP INTERSECTIONSWhen two strokes merge together at a sharp angle, the result can easily make the intersection look heavier than either stroke by itself. The most common approach to compensate for this tendency involves the thinning of strokes, particularly in a curve that merges into a straight line.
(top) Curve joining a straight line; join looks heavy when filled. (bottom) Curve join corrected.
6. STRAIGHT-TO-CURVE TRANSITIONS Going from a straight line to a curve should be a gradual thing. Try drawing a straight line which then starts to curve off. Compare that to what happens when you just glue together a line and an arc, which is all too easy to do in a font editing program. The hand naturally gives a gradual transition from line to curve, while gluing the elements together yields a sudden onset of the curve, which doesn’t look right. Well-crafted fonts adjust the curve onset to make it more gradual.
Left shows result of simply gluing curves onto straights; right is corrected.
7. ROUND VS. STRAIGHT Because of the previous principles, the thickness of a round shape is not consistent. It may only reach its thickest point for an instant, with the rest of the curve looking noticeably less thick. To compensate for this, the thickest point of a round element is usually just a tiny bit thicker than a straight stroke at an equivalent weight, and one might also make the thinnest point a tiny bit thinner.
Top has the O and H sides drawn at the same thickness; bottom is corrected to make the thickest point of the O 5% heavier.
8. CAP VS. LOWERCASE Typically the stroke weights of caps are heavier than the corresponding lowercase, on the order of 4–10%.
In Myriad Pro Regular, the capital O measures 93 on the vertical and 71 on the horizontal, while the corresponding lowercase measurements are 89 and 66.
9. EVEN WEIGHT (MONOLINE)
Sans serif typefaces are more popular than ever right now. In the WebINK webfont service I run as my day job, nine of the top ten typefaces for 2013 are not only sans serif, but also monoline—where the strokes are of even weight, whether horizontal, vertical or curved.
Top letters uncorrected and mathematically even; bottom adjusted.
Left letters uncorrected and mathematically even; right adjusted.
10. STRETCHING AND SQUISHINGAll these delicate balances get distorted when type is stretched or squeezed, as it not only changes the widths of letters, but also the relative thickness of vertical and horizontal strokes. That’s why pro typographers tell folks not to do it, and why a condensed or expanded font made by simply stretching or squeezing will look like hell. “Proper” condensed and expanded fonts maintain the relative horizontal and vertical stroke weights.
11. MIDLINE POSITION Sometimes features such as the crossbar of an H are deliberately high or low. But to look vertically centered, the crossbar must be 2–3% above the midline. If it is drawn at the exact middle, it will appear lower. Similarly, if a font has strokes that taper toward the middle, the thinnest points on the vertical elements should be 2–3% above the middle to seem symmetrical.
Left H crossbar is mathematically centered vertically; right is corrected.
12. PERFECT CIRCLES We already know that an apparently circular O must be slightly taller than it is wide, and have heavier vertical parts than horizontal. But even then the “corners” tend to look just slightly squashed in. Bulging them out just the tiniest bit can help achieve apparent circularity.
There are countless markers to look for, but these are the biggest ones (and a few of the small ones) that should help you distinguish most of the junk fonts out there from the good stuff—and perhaps make better fonts if you are just getting into that. Happy fonting! ca
Like most other software, fonts are licensed rather than sold, under an End User License Agreement (EULA). The font’s license is a functionality every bit as critical as the outline quality and the spacing. The terms of the EULA tell you what you can and cannot do. Most font licenses don’t let you modify the font. Most expect you to pay separately for privileges such as using the font on the web, embedding it in an e-book for sale or letting more than five people use it. A few even charge extra to use the font in a logo, or on merchandise for sale! So the first rule is to check your license terms and make sure that you can do what you need to do.
These and other restrictions have led to an increased interest in “libre,” or free, fonts, which have an open-source license that allows you to do almost anything you want (although some require you to change the name if you modify the font). Libre fonts are also free in price, which is nice from an end-user perspective. Sadly, while there are some real gems among libre fonts, economic and historical factors have led to inferior quality on average in comparison to proprietary fonts—though there are plenty of the latter that suck, too.
These top-twelve markers of quality are best judged by cracking open a font with a font editor. I suggest you use the free FontForge app, try a demo version of FontLab Studio or go for an inexpensive font editor such as FontLab TypeTool or Glyphs Mini for less than $50. For further study on type design, read Designing Type by Karen Cheng and Fontographer: Type by Design by Stephen Moye (out of print, but a great intro even if you don’t use Fontographer). Also recommended, but less narrowly focused: Elements of Typographic Style by Robert Bringhurst; Logo, Font & Lettering Bible by Leslie Cabarga; Anatomy of a Typeface by Alexander Lawson; and the sadly out-of-print Letters of Credit by Walter Tracy. For web resources, try Typophile.com and Typedrawers.com, Briem.net and even my own ThomasPhinney.com.