CODEWITHSUNDEEP
cssfont-size
user2981170
user2981170

Reputation: 61

How to set a fixed font size/ prevent browser scaling for a specific single element?

I want the font in my navigation bar to be a fixed size - not affected by browser font size changes. I'm totally fine with the rest of the text being fluid but the design of my site is such that i need the nav bar text to remain the same size no matter what.

Here is an example of what i would LIKE to do. Don't know how this was done. The nav bar on the top right is unaffected by font size increase/decrease. If someone could clue me in it would be greatly appreciated! :)

http://studiogang.net/

Also, I don't want to use an image instead, because the dropdown menu i want won't work with image mapping. Or at least, i'd rather not go down that road.

Upvotes: 5

Views: 17691

Answers (4)

s3c
s3c

Reputation: 1851

We should not use this, because of accessibility issues. If you set fonts to "fixed" size, then those who have system font to 200% or perhaps browser-zoom to more than 100% etc. because they're near sighted, won't be able to enlarge the font and read what you intend for them.

That being said, when there is truly a need for that (and I'm not innocent in this regard either) a somewhat satisfying solutions is simple.

Use font size with respect to screen size, but it's probably best to do so only on big screens.

@media screen and (min-width: 992px) {
    element {
        /* font-size: 2.5vh; */
        font-size: 2.5vw;
    }
}

Upvotes: 0

hugo der hungrige
hugo der hungrige

Reputation: 12902

You can try using text-size-adjust:

 -webkit-text-size-adjust:none;
 -ms-text-size-adjust:none;
 -moz-text-size-adjust:none;
 text-size-adjust:none;

It only works on mobile though.

Apart from that I think the only option is to make your layout working well on different zoom levels.

Upvotes: 0

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34180

<ul id="navbar" style="font-size:14px">

</ul>

Upvotes: 0

roofdog
roofdog

Reputation: 361

Try using pixels for the font size.

Upvotes: -1

Related Questions