: Icon to text alignment. Align to caps letter, x height or baseline? I'm designing UI for the desktop app. I have a sidebar with menu (icon + label, both clickable). I centered icons to the

@Gail6891361

If you're using any "line" or feature from a typeface to contain something, it's best to use all of those features to contain it as well. Basically, if you're using the baseline, use the cap height, ascender, bar, etc as well.

Type anatomy: www.typographydeconstructed.com/category/anatomy-of-type/

Vote Up Vote Down

@Twilah924

The answer to your question is: it depends.

For example, if you're going for a material design feel (check out this link for more info) then you want to vertically center the icon with the line(s) of text that it is referring too.

However, there are loads of styles of design. I've done projects where the general style called for icons and text to have a "baseline" (if you will) that they sat on. So they weren't centered.

Based on the style you've got going on in your sample stuff, it looks like you're going for a material/flat design feel. So I think you're on the right track. Keep it centered.

But do take a look at that link if you want more example on material design guidelines. It's super informative and can help you maintain a consistent style (as long as it matches what you're going for).

Take a look at Spotify's UI as well. They have icons in a variety of sizes and vertically center them to each other and sometimes to various sizes of text. It's a little bit of a "less obvious" approach than Google's so it might give you some good ideas.

Hope that helps you :)

Vote Up Vote Down