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

CSS Tooltips

What is a tooltip? Essentially, it's a bit of text that when you hover over it (or sometimes click on it), additional information about that text is provided to you. Something like this:

HTML natively supports these with elements such as abbr, which will show the contents of the title attribute on hover; in this case, abbr is semantically meant to be used for abbreviations, like "Prof" for "Professor". Similarly, the acronym tag is meant for acronyms, like NASA. But, they both do the same thing, using the title attribute on hover. In fact, you can pretty much do this with any element; for example, you could add a title attribute on a div if you wanted, and on hover over that div, the browser will reveal your title's text. You can even style these if you wanted, such as defining "cursor: help", which will show a question mark on hover. I've added a couple of these as examples in my demo.

You could alternatively use a span for your tooltip, and by just including your hover content in the title attribute, it will behave similarly to the above examples. To style these, you'd just use "span[title]" as your selector, so you only style spans that have a title attribute in a tooltip like way. That being said, semantics would suggest that a span isn't really appropriate. Enter the CSS tooltip.

CSS Tooltips

The HTML

Your opinion may differ here, but to me a tooltip is very much like an anchor that has no destination (or maybe you have some that do, which we will also talk about later). So, I use the anchor tag here with a class of tooltip. Something like so:

Full tooltipHere is the text description for the tooltip.

You'll also see that I've added a span in there that contains the descriptive text I want to reveal on hover. This is the entirety of the HTML needed here. You'll notice that I'm not defining an href here, this is on purpose, because in my case this won't actually link to anything (more on this later).

The CSS

Here we go:

.tooltip {
    position: relative;
}

.tooltip span {
    display: none;
}

.tooltip span,
.tooltip span:hover {
    color: #fff;
    cursor: default;
}

.tooltip:hover span {
    display: block; 
    position: absolute; 
    top: 1.7em; 
    left: 0;
    width: 150px;
    padding: 3px;
    background: rgba(0,0,0,.85);
    border: 2px solid #000;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #333;
    z-index: 9;
}

.tooltip span:before {
    content: "";
    height: 0;
    width: 0;
    border-bottom: 7px solid #000;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;    
    position: absolute;
    top: -9px;
    left: 3px;
}

a.tooltip[href]:hover {
    cursor: pointer;
}

Let's break this down...

1. 
   First, I want to set a position context on my .tooltip class so that I can position my span absolutely relative to the tooltip. I do that by setting "position: relative".
2. Next, I want the default behavior for that span to be "display: none" so it doesn't show up until we want it to.
3. The real action of this is using ".tooltip:hover span" and setting "display: block". This will reveal the contents of my span on hover over the tooltip. Of course, without some absolute positioning, it will just run inline next to our tooltip, which isn't what we want.
4. Now we can start styling our span...I'm offsetting it to the bottom of the tooltip, giving it a semi-transparent background using RGBA (note RGBA browser support), adding a border and rounding the corners a bit, and adding a box-shadow
5. Finally, I wanted to add a little arrow pointing to the tooltip as a nice touch; I accomplished this with a CSS Arrow (which I wrote a tutorial on), and positioning it absolutely just outside my span. Adding z-index finishes things off so we have the right layering...

Presto!

Full Demo With Code

Additional Stuff

I mentioned earlier that you could also use this in other ways, e.g. for an anchor for which you want to include an href. I've included a simple example of this in my demo, the only variant I chose was that anchors that have an href are underlined, indicating they are clickable (I also changed the cursor to a pointer indicating clickable); You can style these however you want. In fact, using attribute selection, you could add a nice little icon next to (probably after) your link as further indication to the user what kind of interaction they can expect. Taking that just a step further, you can use attribute/value selection to target anchors that define the link to be opened in a new window (i.e. target="_blank"), or select anchors that contain the string "http" to indicate an external link (instead of a relative link to your own site, e.g. /foo.html). Anyhow - lots of fun to be had here. Enjoy!