Visual Alignment

by Ilene Strizver

Designers are used to being detail-oriented and mathematically precise, nudging things a point this way and a pixel that way until technical perfection is achieved. However, when it comes to typographic alignment, the mathematical approach to design doesn’t apply: it’s all in the eye of the beholder.

Visual alignment (also called optical alignment) means exactly that: using that high-tech tool, the human eye, to line up your text until it looks right.

Vertical alignment

Many designers are surprised to discover that using numerically consistent leading (or line spacing) does not assure visually consistent vertical spacing between lines of type. This is typically an issue when setting three or more lines of display type.

For example, if a line of type is all caps, it has no descenders. This creates more white space below it. An all caps line also has a taller height than lines with mostly lowercase characters, creating less white space above it. This is a perfect example of the need for visual alignment: adjust the spacing above and below all cap lines until it looks right, regardless of what the numbers say.

Similarly, in cases where lines with lots of ascenders and/or descenders are preceded or followed by lines with few or no ascenders and descenders, the lines will appear to have varying spacing even if the leading is exactly the same. Use visual alignment to adjust the leading between the lines until they look equidistant from each other.

Horizontal alignment

Visually “off” horizontal alignment can happen in both text and display type and is most easily apparent in flush left, flush right or justified copy. Why? Your computer aligns characters (including punctuation, figures and symbols) by the edge of the character plus its sidebearing (that’s the built-in space that surrounds a letter and is actually part of its design). The spacing of certain characters, such as a cap T or A or the numeral 1, as well as periods, commas, apostrophes, dashes and quotations marks, create a visual hole or indentation in the beginning or end of a line relative to the characters above and below.

This problem is most noticeable in larger settings such as headlines, subheads and initial letters. To solve it, move the line in or out until it visually aligns. (Depending upon your software, there are various ways to do this.) It’s helpful to look at your text from a slight distance when correcting problems, since it can be difficult to know how much of an adjustment is enough. When in doubt, less is more. Don’t try to adjust small-sized type or large blocks of text; it’s too time-consuming and the results are barely visible at text sizes.

NOTE: On screen, italic text almost never seems to align horizontally, especially when centered. This is usually an optical illusion, so beware of making too many adjustments here (if any at all!), or you will wind up with all of your copy askew!

Setting type on your computer makes it a no-brainer to create typography with technically consistent spacing, but always, always, always use your eyes as the final arbiter of good alignment.

Visit our Typography Articles Page to read more about Typography.

• Editor’s Note:Ilene Strizver, founder of The Type Studio, is a typographic consultant, designer and writer specializing in all aspects of typographic communication. She conducts Gourmet Typography workshops internationally. Read more about typography in her latest literary effort, Type Rules! The designer's guide to professional typography, 4th edition, published by Wiley & Sons, Inc. This article was commissioned and approved by Monotype Imaging Inc.