Typesetting UI Elements

<img class=”alignright” title=”Typesetting UI elements” src=”/images/0809/typesetting.png” alt="” width=”220” height=”120” />From time to time I notice applications and websites misaligning text labels on their buttons, tabs and other user interface (UI) elements. Even bigger companies like Google leave bits of their interfaces unpolished. Here’s an example:

This is a button that opens a drop down menu in Google Reader:

<img class=”alignnone” title=”Google reader button” src=”/images/0809/google_reader.png” alt="” width=”165” height=”36” />

Looks OK, but there is one thing bothering me about it: the text is set a little too high. This is made apparent by looking at the arrow on the right hand side, which is obviously placed too far towards the top edge of the button.

Of course this is a tiny issue and I’m being really picky here, but this is something that can be fixed fairly quickly. The problem is that the text seems to be typeset in the middle of the button using the height of the lowercase letters, like this:

<img class=”alignnone” title=”Typeset using lowercase” src=”/images/0809/google_reader_lowercase.png” alt="” width=”165” height=”36” />

What you should do is typeset it using the height of the uppercase letters. This is because there is generally more letter stems sticking up above the lowercase letters, as well as uppercase letters – so we should try to balance this by shifting the text lower. If we draw the lines to show the bottom and top of the uppercase letters here’s what we get:

<img class=”alignnone” title=”uppercase” src=”/images/0809/google_reader_uppercase.png” alt="” width=”165” height=”36” />

This is clearly too high. Let’s shift the text lower:

<img class=”alignnone” title=”moved” src=”/images/0809/google_reader_moved.png” alt="” width=”165” height=”36” />

Now, this still isn’t right in the middle because the button height cannot evenly accommodate the size of this text, so we’ll settle for a touch higher – and that’s actually good because a position slightly higher than middle will provide the best balance. I’ve also shifted the arrow down. It’s only a 1 pixel difference, but it really does improve the aesthetics of the button:

<img class=”alignnone” title=”Google reader button improved” src=”/images/0809/google_reader_perfect.png” alt="” width=”165” height=”36” />

This may seem trivial, but I think correctly typesetting UI elements is important. These buttons are something people use every day. People read labels on buttons, tabs and menu bars many many times during the course of their interaction with your product – these elements are in the spotlight. Making sure they’re perfectly polished gives a good feel to the interface; everything is in place and is pleasing to the eye.