4

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.

hugo der hungrige
  • 12,382
  • 9
  • 57
  • 84
user2981170
  • 51
  • 1
  • 1
  • 2
  • 1
    Simply set the size in pixels (ie. 12px)? Or do you mean when the user zooms as well? – ravb79 Nov 11 '13 at 23:50
  • They used a background image http://studiogang.net/graphics/nav/top.png - not recommended. In fact they use images for all the text on that page. If a user wants / needs to increase the font size, why would you want to deny them that? – davidpauljunior Nov 11 '13 at 23:51
  • I'm pretty sure he means 'not affected by browser zoom level changes'... – hugo der hungrige Nov 11 '13 at 23:55
  • The example site is affected by browser zoom level. The background images get bigger and blurry. – davidpauljunior Nov 11 '13 at 23:56
  • Thanks for the comments. not talking about zoom here - that works fine for me. I've tried defining the size in pixels and em. @davidpauljunior i see that they've got a background image. hmmm... but they also have text in the html. Did they layer text on top of the image? This could be something i would want to do. – user2981170 Nov 12 '13 at 02:31
  • They just have the text as an accessibility thing. They use `text-indent: -9999px;` to hide it off the screen. – davidpauljunior Nov 12 '13 at 02:34
  • Maybe I'm as dense as a diamond, but I have no clue as to what you're going for since setting your font-size in pixels should tackle your problem the way I see it. Perhaps your problem is related to (the absence of) certain system fonts? – ravb79 Nov 12 '13 at 21:11
  • @ravb79 lol im talking about increasing font size in the preference of your browser. not zooming in. going into your preferences and increasing or decreasing the font size – user2981170 Nov 13 '13 at 06:12
  • @user2981170 Okay, then maybe you should check out http://stackoverflow.com/questions/739940/detect-browser-font-size - if you get it to work, you could resize the font percentually depending on the user's browser settings. – ravb79 Nov 13 '13 at 08:17
  • Cool i'll check it out. I still find it weird they use text along with an image in the example site. Is there any advantage to this? How is this an accessibility thing? @davidpauljunior – user2981170 Nov 13 '13 at 17:08
  • Because without the actual text there, it would be a list that contained nothing, which is not a very good menu. Screen readers won't tell that there's a background image that's acting as a menu item. – davidpauljunior Nov 13 '13 at 22:11

4 Answers4

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

</ul>
Ashkan Mobayen Khiabani
  • 33,575
  • 33
  • 102
  • 171
0

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.

hugo der hungrige
  • 12,382
  • 9
  • 57
  • 84
0

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;
    }
}
s3c
  • 1,481
  • 19
  • 28
-1

Try using pixels for the font size.

roofdog
  • 361
  • 1
  • 9