I have read in the past that it is recommended to use only relative sized fonts in web pages of accessibility. Is this still the case? Using Bootsrap from IE7, for example, which uses body{ font-size: 14px; } makes changing the text size do nothing. Is this how a user with functional needs would use the page, or would the user use the Ctrl++ / Ctrl+MouseWheelUp method which actually increases the web page size, not just the text. After doing some searches online, I cannot find any definitive up to date information.

This issues has been raised in the Bootstrap issue tracker, though, but Mark Otto thinks it is not a concern, stating "browsers scale up entire pages these days, so it's not an issue with type scaling or anything."

IE7 Text Size Switching

  • While I have no reference to back this up, I think using relative font-size is an ideal that leads to considerably more headaches than it is worth. Whenever there is graphics or video on the same page, it just does not hold up.
    – Itai
    Apr 15 '13 at 20:04
  • 1
    Using relative font sizes is a good idea, but it requires a design that will accommodate variable fonts. Sadly, not all designers make those. Apr 16 '13 at 11:53
  • There are some CSS frameworks that were built with accessibility in mind, like YAML (why could they not choose another name?) But yeah, it seems like there are a bunch of issues cajoling Bootstrap into being accessible.
    – kzh
    Apr 16 '13 at 13:07

IF you want good accessibility then you should consider IE6 and IE7. Bootstrap has limited support in IE6 and IE7 - Chrome, Firefox, and Safari do not encounter this problem. It is important to note that Twitter Bootstrap is a framework and not everything is done for you out of the box, it can be easily adapted to do what you want it too do with JavaScript.

Bootstrap and Modernizr

With using Modernizr you can easily integrate separate rules for ie6 and ie7 by using the css class:

Default font size: body .ie7 {font-size:100%;} or body .ie7 {font-size:large;}

Additionally you can always use JavaScript to switch font sizes by clicking +/- on the screen: Demo can be viewed here and would use something like this:

  • xsmall.css > body {font-size:x-small;}
  • small.css > body {font-size:small;}
  • large.css > body {font-size:large;}
  • xlarge.css > body {font-size:x-large;}
  • xxlarge.css > body {font-size:xx-large;}

Personally I would go the modernizr route and get the CSS working with IE6 and IE7


Your best bet is to use em, % or rem, instead of px. This site gives a good explanation as to which and where you would use one over the other:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.