Font size using rem

Some background...I've almost exclusively implemented my designs using pixels for font sizing. It's a very specific way of defining size, and is quite consistent (when not defining a bunch of different px units all over your css files). A big issue with that approach is text resizing; that is, on older browsers that don't support zoom, whatever you define is what the user gets, even if they can't read text that small - too bad for them! Once browsers started supporting page zoom however, that problem started to (kind of) go away...at least enough for me to keep ignoring relative units like the em.

An "em" is really the width of the capital letter "M" in whatever your current font-face is. What that means basically is that if the user's browser base font size increases, so will your fonts defined with "em". In other words, font-size: 1em means my font size is the same height as the width of whatever the current font's "M" is. Sort of fuzzy actually, especially if you want strong control over the look of your site. What's REALLY crazy with the "em" unit is that not only is it relative to the "M", it's actually compounded...That is, say your body font-size is 1em, and you have a header element that has a font-size of 2em. You've just defined the relative font-size for the ENTIRE header element and all it's children to 2em, so even if you want a child of your header to be the body's default size, you have to re-define it as .5em (because 50% of 2ems is 1em). It would look like this:

  
Foo
Some sub heading text

body {font-size: 12px;}
header (font-size: 2em; /* This equals 24px */)
header > p {font-size: .5em; /* This equals 12px */}

Of course in actuality we'd probably just define our 2em on the h1 instead of the whole header node, but you can easily see how if we started having nested sections/divs/etc how things could quickly get out of hand. In fact, this is the primary reason I've steered away from the em unit.

The rem Unit to the Rescue!

The "Root Em" Unit allows you to set a single font-size at the body level (e.g. font-size: 12px;) and all references to "rem" will be based on your body's font-size definition. Hooray! So, re-imagining our above code scenario, we'd instead just do this:

body {font-size: 12px;}
header (font-size: 2rem; /* This equals 24px */)
header > p {font-size: 1rem; /* This equals 12px */}

Far more clear (at least to me). You could also set your body font-size to 62.5%; This is a percentage of the browser's body font size, which is usually 16px, essentially saying that your base font-size is equivalent to 10px. So, when I say something like my header is 2rems, I can expect the result to be the equivalent of 20px: (16px * .625) * 2 = 20px. This is an approach em enthusiasts have been using forever, and it still works nicely here.

Browser Support

Support for rem is really quite nice; supported back to IE9. IE8 and older won't know what to do with a rem, but you can always fall back to a specific px utlizing the cascade, like so:

.foo {
font-size: 12px;
font-size: 1.2rem;
}

Browsers that recognize rem will use it, otherwise they'll use the px definition and skip the rem.

CSS Selectors: Descendent vs Child

I wanted to quickly cover the difference between Descendant and Child selectors, as initially they seem almost identical, but they have subtle difference.

Here are our culprits:

/* Child Selector */
div > span {
    font-style: italic;
}

/* Descendant Selector */
div span {
    color: red;
}

The best explanation I've read is to think of what these words mean in English:

• My son is my child, AND is my descendant
• My grandson is NOT my child, but IS my descendant

And this is exactly how the selectors work...
Let's take a look at the difference in syntax between these selectors. Below, we see that really the only difference is instead of using a space between our div and span (which is the typical "descendant" selector syntax), we will use a ">" symbol:

/* Child Selector */
div > span {
    font-style: italic;
}

/* Descendant Selector */
div span {
    color: red;
}

To try and describe in English, the ">" for child selection means: Match only my descendants (i.e. elements within a given node) that are my children (i.e. the immediate level below me), and ignore matches within my children. (e.g. Match MY son, but not HIS son).


In my fiddle, I have a div with 4 immediate "children" (2 spans, 2 paragraphs); I also have a span within one of those paragraphs. In the above CSS, we see that I'm saying to color ALL span descendants of my parent (div) red, but style ONLY the children spans of my parent with italics. The result is like so:


In short, when considering descendant vs child, I consider my family to determine which things I want to actually select. Selection really depends on your intent; in some cases it will be safer to select only children to avoid applying your styles incorrectly to similar elements within those children. Have fun!

Demo with code

FULL DEMO WITH CODE