CSS How to Properly use ems instead of pixels?

Question

I'd like to try and convert my designs from pixels to ems. I've read so many tutorials that... and I'll leave it right there.

Starting with this as my base:

body {
    font-size: 62.5%;
    line-height: 1.4;
}

... now this is where I get lost...

Should I be defining my font-size like this:

div#wrapper { font-size: 1.5em; }

... or like this:

blockquote, li, p, dt, dd, etc { font-size: 1.5em }

And then the next thing I don't really understand is where ELSE should I be using ems in addition to font-size and line-height? I will be using a fixed-width layout using 960.gs.

Answer 1

The problem with em is that it is a relative unit. Inheritance and relativity don't mix well in HTML documents. What I do is use px for font size and box dimensions / positioning, but try to use em for line-height, margin / padding, etc...

I'm sure it's not the "proper" way to do it, but the system was pretty poorly designed from the start, if you ask me.

Answer 2

ems are relative, so if you set:

body {
    font-size: .6em;
}

Everything will be relative to that.

Which means (and this is where my head starts to hurt too) that if an h1 has a default font size of 250% larger than most other text (p, li), the header will now be 60% of that default size. So it will still be 2.5 times bigger than the other stuff, but it will be 60% smaller than if you hadn't set the rule at all.

Now, if you then say that :

h1 {
    font-size: 1.2em;
}

The h1 will now be 20% larger than what it would be if you hadn't set the rule, so it's 20% larger than the already shrunken down 60% smaller from the first rule. This means that it will no longer be in direct proportion to the browser's default for h1 and other elements.

So basically, you should set your font-size up front for the whole document (like in the first rule I showed), and this is your baseline. After that, you set how you want any individual elements to be sized in relationship to each other (basically in relationship to what they already are)...

So if you know you want all of the fonts in the #wrapper div to be 1.5em from their default, setting it there is perfect. But if you want to change the size of blockquote so that it's a tad smaller, you'd still set the rule for #wrapper, but then make a second rule for blockquote.

Answer 3

line-height: 1.4em;

Probably isn't what you want. The line-height will stay at the same computed height for the size of an ‘em’ on that element, even when you change the font-size on a descendant element.

line-height has a special case where it allows a unitless number:

line-height: 1.4;

Which makes each descendant line-height depend on its own font-size rather than the ancestor's.

Should I be defining my font-size [on a wrapper or on many element types]?

Well that rather depends on what you're trying to do. With relative font-sizes it is generally best to keep the number of declarations down to a minimum, because they nest: that is, with your blockquote { font-size: 1.5em; }, if you put a blockquote inside a blockquote you'd get a font-size of 1.5*1.5=2.25em compared to the body font size. Is that what you want? Maybe, maybe not.

where ELSE should I be using ems

Anywhere you want the size of an element to respond to the user's preferred font-size. One common example would be something like:

#maintext {
    width: 60%;
    min-width: 8em;
    max-width: 40em;
}

to try to restrict text lines to a reasonable column width when doing liquid layout.

But if you are limiting yourself to a fixed-width layout it may not make sense to make element widths font-size-dependent.

Answer 4

The basics of proper em usage is to set only the highest parent size in an "absolute"¹ measure and the rest in em. em always relates to the size of the parent element. So if you have your reset rules up including

* {
    font-size: 100.01%;
}

then you can add styles for all other elements in em.

table {
    font-size: 0.8em;
}

#mydivwithbigletters {
    font-size: 2em;
}

and so on ...

[1] * {100.01%} in this case can be considered absolute because the default text size is consistently 16px when no styles are applied

Answer 5

You may find How to size text using ems an interesting and helpful read. The thing that I try to remember is my conversion from ems to pixels.

In your example:

body {
  font-size: 62.5%;
  line-height: 1.4em;
}

1 em is equal to 10 pixels if the browser default text-size is 16px. The line height would then be equal to 14 pixels. Like bobince beings out, I would use a unitless line-height value.

To help you with your calculations, you can use an Em Calculator. It allows you to easily convert between ems and pixels.

Answer 6

Hi,

If you want to set up page width by using em's, follow this pattern provided by YUI development team

Divide your desired pixel width by 13; the result is your width in ems for all non-IE browsers. For IE, divide your desired pixel with by 13.3333 to find the width in ems for IE.

Here's an example of a custom page width of 600px, and here's what the CSS looks like:

600 px / 13 = 46.15 (non-IE browsers)

600 px / 13.33 = 45.00 (IE browsers)

#custom-doc { 
    margin:auto;text-align:left; /* leave unchanged */ 
    width:46.15em;/* non-IE */ 
    *width:45.00em;/* IE */ 
    min-width:600px;/* optional but recommended */ 
}

regards,