5

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?

Luis Gallego
  • 315
  • 1
  • 3
  • 11

3 Answers3

7

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 common 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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
1

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 computedStyle = window.getComputedStyle(document.getElementsByTagName("html")[0], null);
var defaultFontSize = parseFloat(computedStyle.getPropertyValue('font-size'));

For most browsers the default value should be 16px.

kapex
  • 28,903
  • 6
  • 107
  • 121
  • 1
    The code gets the *current* font size of the root element. Typically, it is the size set on the page itself with CSS. – Jukka K. Korpela May 16 '14 at 05:06
  • 1
    In addition, this gives wrong information on IE when the browser has been set to ignore font sizes set on web pages. The code gets the computed value of the CSS property, but that property is ignored in rendering—instead, the value set in browser settings is used. – Jukka K. Korpela May 16 '14 at 05:11
  • 1
    @JukkaK.Korpela Yes, that's why I've said: it gets the default font-size _unless the size got modified_. I'm only talking about the browsers default value of the font-size, which you can get with this code. IE seems to have a rather unique accessibility features which ignore instead of setting the size. – kapex May 16 '14 at 06:21
-2

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?

Community
  • 1
  • 1
Krzysztof Kosiński
  • 4,225
  • 2
  • 18
  • 23
  • 1
    This does not override user style sheet settings that use `!important`. Neither does this override browser settings when they are set to override whatever is set on the page. – Jukka K. Korpela May 16 '14 at 04:58