v4: respect browser font size setting

[timseverien]

I recently wrote an article arguing why pixel units on font-size is generally a bad idea: http://www.sitepoint.com/stop-maiming-bodies-the-perils-of-pixel-font-size/

TL;DR: Many major browsers have a setting that allows users to adjust their font size, which is a great accessibility feature. This setting sets a base font size. By using absolute units, that setting is completely ignored for those elements and descendants.

Examples:

/* All body content will be 14px, regardless of the browser setting */
body { font-size: 14px; }

/* All body content font-size will be based on the browser setting */
body { font-size: 100%; }

/* The contents of h1 and all it’s children will be based on 36px, regardless of the browser setting */
h1, .h1 { font-size: 36px; }

In order to provide proper accessibility, developers who use Bootstrap are required to:

1. Have knowledge of this browser setting, understand it’s value and know how to respect it
2. Use Sass
3. Review and overwrite all font-size variables

Solution:

Use relative units, always.

html { font-size: .625em; }
body { font-size: 1.4rem; }

h1, .h1 { font-size: 3.6rem; }

[RyanZim]

Duplicate of #19460, please close this issue. Thanks!

[timseverien]

Ah. I did look but couldn’t find a similar issue. Sorry!