Typesetting UI Elements
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:
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:
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:
This is clearly too high. Let’s shift the text lower:
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:
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.
18 Sep, 2008
I agree. Unfortunately there isn’t much you can do to style form select elements in IE7. Ugly little “feature”.
Keep up the great work.
18 Sep, 2008
Thanks Geoff.
Google’s drop down box is actually custom javascript, so in that case they aligned it themselves. Most native OS form elements tend to be OK — issues arise when people use their own graphics for buttons and tabs on their sites.
Also, one thing you must watch out for when making custom buttons like this is that different browsers have slightly different defaults and size interpretations (Safari tends to round up ‘em’ font sizes for instance, while Firefox is more precise). So testing how your site looks in all the main browsers is especially important here.
18 Sep, 2008
I totally agree. While it doesn’t really affect usability it is distracting. Sometimes it’s tough to get this right as browsers display text differently, but still it’s something to work toward.
18 Sep, 2008
Those small fixes actually are most annoying part of front-end development
19 Sep, 2008
Interesting. If I look closely enough I do notice it slightly being off. I’ve never noticed that before, but probably mainly because I don’t think I’ve ever used the dropdown before.
19 Sep, 2008
I realize Google has an advantage given they are using a custom select for this specific control. But I struggle with the decision to use custom controls to overcome browser inconsistencies. I’m a bit of a purist in that I always want these types of controls to degrade so they’ll still function w/o JavaScript. Then again, it is 2008. :)
19 Sep, 2008
How about lettters like:gyjqp
Text including these letters might be set a bit to low in your example.
19 Sep, 2008
mehrogramming: Good point. The thing is, there are generally more stems of letters (the long stroke going up) than tails on letters like g and y going down. So all the uppercase letters as well as t,i,d,f,h,j,k,l,b will stick up above.
Of course if you’re not using uppercase letters on your labels, you will probably need to set the text higher, guided more by the height of the lowercase letters.
19 Sep, 2008
Hi,
nice post again. Sometimes even details may affects overall user experience, because when 5-10 little things adds up user may be dissapointed. So when building software it’s good to be perfectionist.
30 Sep, 2008
Great post. I just started reading your blog and what I like is that you take time to point out the smallest details - which really account a lot for whether or not a design is successful as far as usability and aesthetics go. Great work.
10 Oct, 2008
Good point there, Dmitry. Even more so, that we humans perceive the middle of any object to be slightly lower than it usually is, as studies have found out.
That is why I tend to align the type on buttons, etc. somewhat lower than I would do geometrically.
Great Blog, interesting articles btw. Keep it up :)
6 Nov, 2008
Great article! Though, not to nitpick, your ’stems’ and ‘tails’ are technically called ‘ascenders’ and ‘descenders’ respectively. Making each name more self explanatory.
:)
6 Nov, 2008
Hey, I’m not really a typographer, just a designer :) Thanks for pointing that out though.