I'm making an adaptive website, And when the user has some odd font size configuration (For visual issues and so) The design breaks in a terrible way... Obviously I don't wanna forget the accesibility... So: Is there a way to know when the user is trying to force the font size, disable that and give him different styles?

I'm making an adaptive website, And when the user has some odd font size configuration (For visual issues and so) The design breaks in a terrible way... Obviously I don't wanna forget the accesibility... So: Is there a way to know when the user is trying to force the font size, disable that and give him different styles?

• javascript
• html
• css

• :( Can't I even see if he has that configuration? – Luis Gallego Commented May 16, 2014 at 3:57
• you can add all the css resets you want, but if the user has their own user style sheet, it overrides everything! – MilkyTech Commented May 16, 2014 at 4:02

3 Answers 3

Normally your font size settings on a page override those set in browser settings, except if you use % or em when setting font-size, in which case they may be relative to the size set in browset settings (depending on exactly how you set the sizes).

This means that if you have, say body { font-size: 9px } in your CSS and a visually impaired user has selected the largest size in normal Chrome settings (corresponding to 24px), the user setting is overridden and the illegible size is used. This is one reason why browser font size settings as such are not often changed by users: their effect is rather limited, when used alone.

However, if the user has set the browser to ignore font sizes specified on web pages (this is possible e.g. in IE via Accessibility settings), then the font size in browser settings is used, no matter what you do. (Font size within the page might still vary, e.g. due to using small markup or heading elements, as per browser defaults for some elements, but any CSS settings on the page for font size would effectively be disabled.)

Similar considerations also apply minimum font size settings, which are rather mon and might be set even by browser’s factory settings. They take effect after normal CSS cascade has resulted in some size—if that size is smaller than the minimum set, the minimum is used instead.

There are indirect ways to try to find out what the font size actually used by a browser is, e.g. by getting the height of an element using the clientHeight property. If you do that for an element with line-height: 1, you normally get the actual font size used. But you cannot disable it; it’s pretty much the essence of browser settings that override settings on web pages that web pages cannot override them.

You can get the default font size with getComputedStyle by reading the property of the root html element (unless you have a css rule which modifies its font-size).

// get default font size in px
var putedStyle = window.getComputedStyle(document.getElementsByTagName("html")[0], null);
var defaultFontSize = parseFloat(putedStyle.getPropertyValue('font-size'));

For most browsers the default value should be 16px.

To override a value from the user's style sheet, add !important to the rule specifying the font size, for example:

body {
    font-size: 16px !important;
}

Note however that in general this should be avoided. See also this SO question: when to use !important property in css?