Typesetting UI Elements

on Oct 18, 2007

typesetting

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:

misaligned text on a button

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:

misaligned text - guide lines

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:

aligned text - guide lines

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

aligned text on a button

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.


6 Comments

  1. Comment by Paul Rogan — Nov 1, 2007 @ 12:33 am

    Nupe.

  2. Comment by Ceastespooche — Nov 2, 2007 @ 6:01 am

    Thanks for this tip.

  3. Comment by Pauly — Nov 9, 2007 @ 6:13 am

    Hi guys just to update you on this…um

  4. Comment by Jigneecer — Nov 27, 2007 @ 9:35 am

    Hi, hello, privet
    toyota tundrag u

  5. Comment by Greg — Dec 4, 2007 @ 10:17 am

    Nice post. I’m glad you like my little app. You have very little flexibility on layout within the input and button controls. Getting text to line up just-so is much easier in Photoshop then in the CSS/HTML.

    I did manage to nudge it a pixel or two but it’s still not exactly how I would like it. :)

  6. Comment by Dmitry Fadeev — Dec 4, 2007 @ 11:49 am

    Hey Greg, sorry to use your app as an example.. Apple are really the ones to blame for this :)

    It’s not just the iPhone UI where I’ve began noticing this, but also the latest OS X Leopard update, where it is easy to see when non-text elements like arrows are positioned a pixel or two higher than they should be. Not really sure what the problem is there as an arrow is a pretty basic shape, so should just go in the middle, but that’s how it is.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Contact Information

If you would like a quote or a project proposal, just click here to fill in our short client web form and we'll get right back to you.

Direct Contact Details

Email Email: info@pixelshell.com Skype Tel: +44 (0)20 8816 8876