0

The default font size is 16px, but I don't know if the font size of the navigation menu should be the same (16px), smaller (14px) or bigger than 16px. I think that bigger than 16px is going to be complicated because I could not add many elements and I must add a login button and another one that will have three words. Also, the language selector.

Are there any rules or best practices about this?

4
  • Hello Bea, there's not going to be any definitive rule here. With font and text decisions, you should ensure that whatever sizes and colors you choose result in a sufficiently readable result, but beyond that it's essentially just a matter of opinion—whatever works best for your design and layout. Good luck! Commented Sep 30, 2020 at 14:42
  • @maxathousand Thank you! Commented Sep 30, 2020 at 15:18
  • I also find the interface guidelines a great resource. It provides consistency and makes use of tried and tested designs. Commented Oct 4, 2020 at 9:23
  • I second who has preceded me. Google Material guidelines recommend either 16px normal or 14px Medium, this to give more importance per word.
    – Giulio
    Commented Jul 1, 2021 at 13:23

2 Answers 2

1

Just like @maxathousand commented:

With font and text decisions, you should ensure that whatever sizes and colors you choose result in a sufficiently readable result

There is not right font size but the key here is that it must be sufficiently readable. You can check, however, some navigation guidelines for navigation by Apple and Google here:

Apple: https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/

Google: https://material.io/components/app-bars-top#theming and https://material.io/components/navigation-drawer

And verify the color contrast color ratio here: https://contrast-ratio.com/#%23333-on-white

0

Since you are mentioning a language selector and specifically if this is some kind of form element, the use of font sizes smaller than 16px is known to cause a for some users rather annoying "zoom effect" worth taking into consideration.

*Edit:

I don't know if this phenomenon has a name other than "zoom effect" but a simple google search gives us this short article from css-tricks discussing just this.

LearnUi.design (which I never heard of before) is the second search result and they mention this as a potential problem since it causes obscurance of parts of the screen.

I haven't really researched this matter, more stumbled over it during my own web projects. I'm sure there are actual studies of this if you have access to large document databases. But only googling it will bring lot's of results.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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