3

I'm designing UI for the desktop app. I have a sidebar with menu (icon + label, both clickable). I centered icons to the first caps letters. Should I use other alignment? Are there any guidelines on text to icon alignment?

enter image description here

  • 1
    I think this really boils down to a matter of personal/artistic preference, but that's how I would do it. – Manly Nov 8 '16 at 15:28
1

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 :)

0

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: http://www.typographydeconstructed.com/category/anatomy-of-type/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.