How do prevent text size increase on html/css

Question

this website looks very nice, although the've managed to prevent the user to increase/decrease the font size through the browser facility.

http://simplegeo.com/

If you check the Zoom Text Only option on your browser and try to zoom in or zoom out (usually ⌘+ / ⌘- or ctrl+ / ctrl-) you can see that the font-size doesn't change.

How can I replicate the same effect?

I am thinking that this would be nice to prevent items from menu or purely layout based elements and leave only the main text be affected.

Solution 1

From looking at their CSS, it might be this line of code: -webkit-text-size-adjust:none; If so, it'd only work in a limited number of browsers, not everywhere.

There's not much reason you should be preventing users from adjusting text size, though. Yes, it might cause problems with the design, but you could also argue that the design should be flexible enough to deal with font size changes.

Comedy option: replace all your text with images.

Solution 2

Use the following CSS code.

<style type="text/css">
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
-moz-text-size-adjust:none;
text-size-adjust:none;
</style>

Comments

[cdeszaq]

Messing with zooming a browser (text or whole-screen) is a major accessibility no-no. Let your users do what they want or need to. If they break it by zooming too much, you can't stop them because they might have REALLY bad eyesight and need text that is huge in order to read it.

[joekarl]

Funny you should mention that, All of the headers on the page are in a sprite.

[zanona]

thanks @thedaian it worked just fine, I am aware of the bad approach, just was a bit curious to know how they managed to do it. I agree you have to offer the user the choice to change the text. But who knows, sometimes you have a just static element which is supposedly to server only as a adorn or something like this and don't want this to be resized? well, thanks again for being the only one worried about how to achieve this instead of just say it shouldn't be done :)

[Augustin Riedinger]

The solution is not to prevent people from changing font sizes/zooming as it is a accessibility preference, but being able to tell them that it actually is a configuration on their side that they set, that they want it or not. Otherwise, these people may think it is a developer issue, and the user experience on your website is worse ... and everybody is sad (developer, ceo and user!)

[Constantin Groß]

Note: "none" can cause problems (i.e. the text size still being adjusted) at least with the -ms-prefix. Use "100%" instead.

[clearlight]

The stupidity of it is that the infinite wisdom of the browser UI architects is that we should let users select arbitrary font sizes, but the browsers don't offer reliable simple reasonably straightforward ways to keep things lined up as the font scales, for example text drawn in a circle laid out in divs over a canvas w/graphics. Nightmare w/zoom! . Pure headaches. Are web designers not supposed to do anything creative? If people want to be badass hyper-authoritarian wise-guys they should at least be smart enough to provide the means to accomplish it for otherwise reasonable designs.