Michael Stipe’s favorite way to declare font sizes

I started using ems around 2002, and I never liked it. Using ems meant having a calculator handy just to define a font that was listed at 11px in the style guide. The main issue with ems is inheritance.
If you wrote a rule like this:

li {font-size: .75em}

An li within an li would have only 75% of the font size you really wanted.
Rems, on the other hand, are only relative to the html root (thus, root em).
So,

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

This article explains the basics:
http://snook.ca/archives/html_and_css/font-size-with-rem

And more advanced:
http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s