Text size for navigation bar should be same, bigger or smaller than 16px?

Question

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?

Answer 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

Answer 2

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.