“CSS Rooted”: Flexible Font Sizes with REM

Discussions about the best way to define the font size and the font size is probably as old as the Web. Besides the traditional candidates such as px , em and % there with things, a new candidate who combines the best of the other units in themselves.

Used to be standard: font size by em or %

Until about 2008, it was considered largely as a best practice to define the font size in the CSS as flexible as possible. These units were em or % used, relative to the default setting in the browser, usually in 16px lies.

This flexible mix served to users at the time the best reading experience, since many browsers have had no zoom and page with IE6 could px back-defined text is not at all, at least without an intervention in the system settings.

Both em and % were in practice problems with the inheritance of font sizes. A percentage is always relative to something, usually to the parent element, and at em is no different:

  • In a box model property as margin-bottom is oriented em to the font size of the element itself is a change the font size, the spacing, which for example in the text is often a desired effect.
  • In contrast, the font size as a basis for a valid em the font size of the parent element . An indication of such 0.875em Thus, at each nesting a little bit smaller.

Almost like Alice in Wonderland. Times too large, sometimes small, but really fit but then never do them.

The temporary emancipation of px

In February 2009, Jens Grochtdreis held in his blog article ” The unfortunate thing with the font scaling “a short plea for the pixels. Modern browsers had at that time a page zoom and IE6 was important as a counter argument less and less.

A year later, Gerrit van Aaken published a post with the title ” Why do I use pixels for CSS font sizes “. In the discussion below Gerrits commitment to px Things were high, but particularly noteworthy is comment # 22 , in which a unit called the rem is mentioned, which was most web designers have been largely unknown.

The “root em”: rem as a new star in the font-Heaven

Since about 2011, the things, slowly but surely known, because it combines the advantages ofpx and em . It’s as flexible as his older brother, em , but bypasses the disadvantages of inheritance, because the “root em” always on the root element <html> refers (not to <body> ).

By the value of things, to get, simply dividing the desired pixel size by the output value 16The CSS would look such a font definition as follows:

html {  font-size :  100% ;  }  / * default browser, 16px * /
h1 {  font-size : 1.75rem ;  }  / * 28/16 = 1.75 * /
h2 {  font-size : 1.375rem ;  }  / * 22 / 16 = 1375 * /
p {  font-size : 0.875rem ;  }  / * 14/16 = 0875 * /

The fallback for old browsers with px

That sounds almost too good to be true, but in fact the story has only one catch: Old browsers, as always. On http://caniuse.com/rem , one can get a good overview, and does not look so bad:

caniuse-com-rem-unit_mini-w640

The real weaknesses provide the IE prior to version 9, and Opera Mini. For these and all other old browser colleagues one can incorporate in its stylesheets pixel fallback that look like for the above example it could:

html { font-size: 100%; }
h1 {
font-size: 28px;
font-size: 1.75rem;
}
h2 {
font-size: 22px;
font-size: 1.375rem;
}
p {
font-size: 14px;
font-size: 0.875rem;
}

Modern browsers read and write as part of the cascade px value with the rem -value, however, take the older px statement and ignore the second line. Perfectly.

Subscribe and never miss a post!

Subscribe to the free newsletter now and get fresh content delivered straight into your inbox. (No spam, we promise)

Comments

  1. great collection and tutorial for all designer.

Comment Policy:

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.


Tell us what you're thinking...

If you want a picture to show with your comment, then get Gravatar!

*