Advertisement


Aligning letters "Wrong" appears more "Right"


Question

I'm currently working on a logo for a client. Here is the work in progress. enter image description here

It seems obvious to me that the S should align with the line above. I feel that the best way of aligning it however is to align the bottom part of the S rather than the top curve, even thought the top curve does protrude more. See the following example enter image description here

Also at the other end of the logo, the A I feel can do something similar, minimising the white space triangle at the end of the logo

enter image description here

The end result I think is more pleasing in its alignment enter image description here

I feel that this is correct, but my client is questioning it. This alignment is a habit I have picked up during my career, so I haven't been formally taught this, in fact I can't remember where I picked this up.

Tell me, have I picked up a bad habit here? Is my client correct? If this is correct does this type of alignment have a name? Or is there an article somewhere I can refer my client to?

2015/08/06
1
44
8/6/2015 12:58:00 PM

Accepted Answer

Yup, these are legitimate things and they have names.

"Visual alignment", or, "Optical alignment"

This is the general principle - you're aligning by eye by what visually looks right, rather than by rule. It's used not just in typography but anywhere visual consistency is important, for example in designing icon sets - making icons with curves look neat when lined up with icons with straight edges.


The more specific technical terms below are not very commonly used (I had to look them up), they're just here for the curious.

Typographical Overshoot

This is when a character passes the appropriate vertical point because doing so looks more natural than stopping strictly. Joojaa's answer has lots of great examples of this, I'll just add this one from Microsoft's typography standards (don't laugh, despite unleashing Comic Sans on the world MS have a generally pretty good typography team) that shows it's not just the baseline where this is used:

enter image description here

Optical margin alignment

Essentially horizontal overshoot, usually applied to curved or slanted characters, and other characters with little meeting the edge that would look wrong against a hard line. It's basically tight kerning at the margins, and the characters that it is applied to are generally the same ones that would receive tight kerning elsewhere.

Here's how Wikipedia currently illustrate it:

enter image description here

43
8/6/2015 1:48:00 PM

If you look at many fonts you'll notice that the curvature of the letter 's' pierces the perfect alignment of the baseline and of many other small letters. And as a general rule round shapes tend to do this - pierce the baseline of straight edges. I had an article about this phenomenon, and why it happens, somewhere in my bookmarks but the link evades me at the moment.

Round shapes pierce the baseline

Image 1: Some examples of round 's' piercing the baseline, with the baseline piercings highlighted.

If you look, even fonts that are very geometric do this (see Image 1). This happens more often than it doesn't - so much so that I've heard it spoken of as a rule. However note how the amount differs from situation to situation and shape to shape. So still today it's your eyes that decide.

If your eye is keen you'll also notice that some letterforms also pierce the vertical sideways. That is because the same phenomenon also happens there.

Curve of "S" extends to right of alignment with vertical serif

Image 2: Same effect sideways. This commonly happens if you have straight lines and curved lines mixed sideways.

PS: Sorry, fonts available on my temporary workstation are a bit limited.

2015/08/06