Saturday, October 18, 2014

Design notes: hairline symbols ( | / \ + = _ )

There exist a handful of lineal symbols—slashes, the equals sign, etc. which are relatively simple to design, even if some confusion exists about their dimensions and placements. In almost all typefaces, these characters are plain rectangles.


Slashes—‘/’, ‘\’—sometimes called solidusses (or solidi) are hairline characters derived from a third glyph—the vertical bar ‘|’.
Dimensions of the various slash characters
Dimensions of the various slash characters
  • The vertical bar is optically the same width as the en-dash (or em-dash), though since it’s oriented vertically, it needs to be a bit heavier (like 0.044 ems vs 0.040 ems).
  • The vertical bar is supposed to extend across the entire em height. That is, the vertical bar is 1.0 ems high. But not all fonts obey this rule. There is some confusion over whether or not the bar is continuous. The vertical bar is always continuous—the broken form ‘ ¦ ’ is a separate character.
  • Spacing of the vertical bar varies across typefaces. I like to go with sidebearings that are twice the width of the bar itself.
  • The slash is the same width as the vertical bar, just inclined exactly 18 degrees away from the vertical. This figure is incredibly consistent across typefaces; in fact, many designers will naturally create slashes tilted 18 degrees without even knowing about the rule, simply because that angle looks the best to the eye. The backslash is an exact mirror reflection of the slash.
  • For most typefaces, the top of the slash terminates at the ascender line. The descent of the slash varies—some fonts bring it almost to the descender line, others to the bottom of the parentheses, and others just below the baseline.
  • For many typefaces, the slash is just a long, thin, tilted rectangle. Many other designs however, include slashes that are shaped like parallelograms, with flatly-cut bottom edges.
  • Spacing the slash is more important that most other punctuation marks, since its leaning shape and common occurrence adjacent to letters (like in ft/sec) make it prone to collisions. The general rule is to space the slash so that if it extended two-thirds the way to the baseline, the ends would just barely extend over the shank (metrical width of the glyph, shaded in the above diagram). This holds even if the slash itself terminates above or below the “two-thirds” line.

The plus sign, equals sign, and underscore

These three characters are all close relatives of the en dash, and are all composed of horizontal or vertical hairlines.
Dimensions of the plus sign, equals sign, and underscore glyphs
Dimensions of the plus sign, equals sign, and underscore glyphs
  •  The plus sign is a perfect cross—its exactly as tall as it is wide. It can be built from an en dash, copied and rotated 90 degrees. If the vertical part overshoots the mean line, the glyph should be shortened on all four axes until it fits. This means that the plus sign may be slightly narrower than an en dash.
  • Hairline characters are supposed to be monoline—that means they lack any stress whatsoever. The vertical stroke of the plus sign is just as thin as the horizontal part.
  • The equals sign is made up of two copies of the horizontal part of the plus sign. They should be centered about the height of the en-dash, and spaced so that they roughly  outline a 2:1 rectangle.
  • The underscore is an en-dash affixed to the descent line (the bottom of the em rectangle) and often lengthened slightly. The ends of the underscore must always touch the edges of its shank—in other words, have zero sidebearings. Some fonts don’t do this—these fonts are wrong. Underscores, when typed repeatedly, must always form an unbroken line along the very bottoms of their em rectangles. This is for reasons similar to those for em-dash, except since the underscore is never found in normal prose (it is strictly a formatting character, used to compose crude rules and blanks—“______” ), it is easier to just set it with zero sidebearings than to kern consecutive underscores together. It’s also often convenient (though not at all a requirement) for the underscore glyph to be exactly half an em long.