How To Align Text In Buttons And Other UI Elements
I’ve struggled for some time about the right way of aligning text in buttons and not only this. So I want to share results of my research and practical thoughts on it.
As the interface designer, I think that we need to achieve balance in UI elements. And in a whole layout that we use, whether it’s in a web or mobile environment. That sounds obvious. But let’s go into specifics to highlight some of the things that I deal with all the time in my work. And what I found that other designers struggle with.
But first, let’s see what rules and terms do we have about typography.
There are different options for placing text in buttons.
Some people say that we need to take into consideration capital letters and descenders. Some people on the opposite side and small caps are more important for them. Both of them might be right. And the solution here is to pick one rule. Consistency is a king in this kind of things.
But what about the case if we want to make a balanced solution for the most common case? What the rule from these 3 should we pick?
To solve this systematically I created the alphabet. And tried to figure out how many descenders (“g” “j,” “p,” “q,” and “y”) and ascenders (“t,” “d,” “f,” “h,” “k” and “l”) we usually have.
On the last line, you can see that the darker area the more weight it has taking into account all the letters that we might use. So the area between median and baseline is usually filled out with small letters. Ascenders plus big letters are commonly used than descenders. So, it's obvious what take more space. This logic explains that to align text correctly for most of the people we need to use the 3rd approach.
Descenders are used rarely and usually middle and upper part fills more space. That’s why we can use this approach in general.
Don’t forget to make it consistent throughout all the UI. It’s that type of consistency that you can find only in details. Again, people don’t see it, but they feel it.
Let’s take a look how top companies that create digital products align text in their UI.
I took buttons as an example to focus on the logic of alignment. But let’s take a look how it works with other UI elements like select boxes, checkboxes with labels, etc.
The same approach that I figured out on buttons.
If the amount of small and capital letters is dominating against descenders than it makes sense to align icons with this part of the text.
But what about placing bigger icons and smaller texts in one line. I’ve made research and measured navigation area of the most popular companies.
Usually, we achieve balance centering text that in line with a graphic element that has more weight or just bigger than others. The only exception here is Amazon. They just aligned logo and search bar by the top. Which is also looks balanced and creates a certain harmony in the navigation area.
You can see that horizontally these examples also balanced. If we have a logo on the left side then in most of the cases we have an action button or navigation elements on the right side. What equates weights on both sides.
There are a lot more examples on a balanced organization. And the most common pattern that I usually see is that well-organized interfaces have rules. But rules is so boring you can say… Agree with this statement. I don’t want to create bureaucracy around this magical creative process. But still, if we want to create great design that feels great and people trust to it then we should learn to notice things like this. And practice until we’ll be able to make it right intuitively. Sounds fair?
You'll learn to do it automatically after some time when you pay attention to this kind of things for some time.
…and do not forget about consistency.
Thank you for reading,