TypeTalk: Horizontal Alignment

TypeTalk is a regular blog on typography. Post your questions and comments by clicking on the Comments icon above. If Ilene answers your question in the blog, you’ll receive one Official Creativepro.com T-Shirt!
Q.Thanks for last week’s post on vertical alignment. now can you write about horizontal alignment? I often see centered lines that don’t look truly centered.
A. Creating proper horizontal alignment is a bit more challenging than vertical alignment due to the subtleties involved, but it’s just as important to professional-looking typography.
Software aligns characters by the edge of the character plus its side-bearing, which is the space added to the right and left of a character in a font to prevent it from crashing into other characters. The characteristics of the spacing of certain characters, such as a cap T, A, the numeral 1, as well as periods, commas, apostrophes, dashes, quotations marks, and ellipses, will often create a visual hole or indentation at the beginning or end of a line, making that line appear to be slightly off-center. This occurrence is magnified in larger type settings, including centered headlines and subheads.
When this occurs, shift the line in question slightly to the right or left until it visually looks centered. The easiest and most precise method (and least problematic when changes are made to the size and font) is to kern the offending character to a space added before or after it until the line looks visually centered.
The example on the yellow background is technically centered using Adobe Illustrator’s Align center command, but the second line visually appears off (too far to the left to be exact) due to the em dash at the end of the line which has a lot of negative space above and below it. The horizontal alignment is improved in the example on the green background by adding two word spaces at the beginning of that line, and then using negative kerning between the spaces to fine-tune it. Set in TypeCulture Expo Serif Pro.

Love type? Want to know more? Ilene Strizver conducts her acclaimed Gourmet Typography workshops internationally. For more information on attending one or bringing it to your company, organization, or school, go to her site, call The Type Studio at 203-227-5929, or email Ilene at [email protected]. Sign up for her e-newsletter at www.thetypestudio.com.

Ilene Strizver is a noted typographic educator, author, designer and founder of The Type Studio in Westport, Connecticut. Her book, Type Rules! The designer’s guide to professional typography, is now in its 4th edition.
  • The Monicker says:

    The Elements of Typographic Style says:

    “Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.”

    I believe this is understood to mean that white space should be in multiples of the basic leading. I have tried to map this out iin my head, and I can swing left or right brain, but I can’t get the numbers to make sense, especially when trying to apply it to web typography with line-height in ems.

    Got any insight?

    By the way, I love your column and have read the archives and jump on every new entry. You have been one of my big influences to inspire me into typographical nerddom, whereas I used to find it difficult and intimidating. Now I walk around the city going, “look at that… Myriad… Zapfino again?… ugh, Papyrus?”

    ~Joseph Sims, Louisville, KY

  • PatNewMex says:

    Love the article but have to disagree with the positioning of the second line. I realize this is highly subjective, but to me, the line needs to move to the left, not the right, to be visually centered (as opposed to technically centered). For me, the em dash on the right of that second line sticks out too much. But again, just a personal preference. The article did give me helpful information. :-)

  • >