The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

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.

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: