Kyle Nunery

Font Size with REM and Calc Function

Kyle Nunery -

I am on a project where the lowest targeted browser is IE9.  Hallelujah!  You can embrace the greatness that is CSS when you don't have to be held back by older browser CSS limitations.

Font Size with REM

The first gem I have run across in my latest CSS project is rem.  REM is short for "Root EM" and is sized to the root element of the document which is the html element.  We can size all text relative to a single element which avoids the pains associated with EM font sizing.  Here is a quick example of how to use REM.

html { font-size: 62.5%; } 
body { font-size: 1.2rem; } /* =12px */
h1   { font-size: 2.4rem; } /* =24px */

Setting the font-size to 62.5% on the html base element allows us to have a more convenient way to mentally handle rem sizing.  The browser support for rems is IE 9, Firefox 3.6+, Chrome, and Safari 5. In order support browser without rem sizing it is recommended to do the following.

html { font-size: 62.5%; } 
body { font-size: 12px; font-size: 1.2rem; } /* =12px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

Calc Function

In CSS you can use a calc() function.  For example, you can do the following:

width: calc(100% - 80px);</code></pre>

There is a clever trick with the calc() function that allows you to create columns without a container function.  This is demonstrated on Chris Coyier's website

References

http://css-tricks.com/font-sizing-with-rem/
https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Positioning_an_object_on_screen_with_a_margin
http://css-tricks.com/a-couple-of-use-cases-for-calc/