Alignment of text is important on things like buttons and tabs, and this is something that many times designers get wrong. For example, I’ve been browsing some blogs and found an interesting new application for the iPhone that let you calculate tips. Great idea, and the app looked pretty nice too—except for one thing…the alignment of text on the buttons. Now, I don’t know whether the designer or the actual SDK is at fault—that is really irrelevant—I’m not here to criticize the app, but to just illustrate a simple point about text alignment and how to do it right.

Alright, so here’s a screenshot of the drop down box:

Looks alright? It looks O.K. but something isn’t quite right. The text feels a little bit too high. The reason for this is that it has been vertically centered using the height of the lower case letters. Here’s the same image, but with two blue lines showing what I mean:

You can see that the blue lines are wrapping the lower case letters at the top and bottom, and are then centered in the space provided by the drop down button. This is the wrong way to position text on buttons because it doesn’t take into account the upper case letters, numbers, or tall stems of letters, and so makes the text feel slightly higher than it should be. This by all means isn’t a big issue, but simply repositioning the text can make the user interface more aesthetically pleasing to the eye. We can do this by using the upper case letter as the guide. Let’s use the blue line guides again, but now position them over and under the upper case letter “G”. Then we move the text down a little to center our new guide lines on the button surface. We get this:

Now let’s remove the guides and see the result. Here’s what we get:

This feels more natural. Even though the difference can only be a pixel or two, every little touch will add up. After all, people using your user interface may be doing it daily, hundreds of times—if the interface is that much more polished, their experience will be enhanced, and so I think it is important in many cases to go that extra mile and ensure every pixel is positioned just right.