CSS How to use ems instead of pixels?

Question

I would like to try converting my projects from pixels to ems. I read so many textbooks that ... and I will leave it there.

Starting from this as a base:

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

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

Should I define my font-size as follows:

 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 really don't understand, where should ELSE use ems in addition to font-size and line-height ? I will use a fixed-width layout using 960.gs.

Answer 1

 line-height: 1.4em; 

This is probably not what you want. The line height will remain at the same calculated height as the size of the em element, even if you change the font size to the descendant element.

line-height has a special case when it allows a unit number:

 line-height: 1.4; 

Which makes each descendant line height dependent on its own font size, and not on the ancestor.

Should I determine the font size [on the wrapper or on many types of elements?]?

Good thing it depends on what you are trying to do. With relative font sizes, it is usually best to keep the number of declarations to a minimum because they nest: that is, with your blockquote { font-size: 1.5em; } blockquote { font-size: 1.5em; } if you place the sample block inside the block, you get a font size of 1.5 * 1.5 = 2.25em compared to the font size of the body. Is this what you want? Maybe, maybe not.

where ELSE should use ems

Anywhere you want the element size to respond to the user's preferred font size. One common example might be the following:

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

to try to limit text strings to a reasonable column width when performing fluid layouts.

But if you are limited to a fixed-width layout, it may not make sense to add the font size to the font size.

Answer 2

You can find How to enlarge text using ems interesting and useful reading. What I'm trying to remember is my conversion from ems to pixels.

In your example:

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

1 em is 10 pixels if the default text size for the browser is 16 pixels. Then the line height will be equal to 14 pixels. As bobince creatures outside , I would use the unless line-height value.

To help you with your calculations, you can use Em Calculator . This makes it easy to convert between ems and pixels.

Answer 3

The problem with em is that it is a relative unit. Inheritance and relativity do not mix well in HTML documents. What I am doing is using px for font size and drawer sizes / positioning, but try using em for line height, margin / padding, etc.

I'm sure this is not the “right” way to do this, but the system was very poorly designed from the very beginning, if you ask me.

Answer 4

ems are relative, so if you install:

 body { font-size: .6em; } 

Everything will be relative to this.

This means that (in this case, my head starts to hurt too), if h1 has a default font size that is 250% larger than most other texts ( p , li ), now the title will be 60% of this size default. Thus, it will still be 2.5 times larger than the others, but it will be 60% smaller than if you did not set the rule at all.

Now, if you say that:

 h1 { font-size: 1.2em; } 

Now h1 will be 20% more than it would be if you had not set a rule, so that it is 20% more than already compressed 60% less than the first rule. This means that it will no longer be directly dependent on the default browser for h1 and other elements.

Basically, you should set the font size in front of the entire document (as in the first rule that I showed), and this is your basic level. After that, you set how you want the individual elements to be mapped to each other (mainly depending on what they already are) ...

So, if you know that you want all the fonts in the #wrapper div to be 1.5em from their default value, its setting is perfect. But if you want to resize the blockquote so that it is slightly smaller, you would still set a rule for #wrapper, but then make a second rule for blockquote.

Answer 5

If you want to adjust the page width with em, follow this template provided by the YUI development team.

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

Here is an example of a custom 600px page width, and here is 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 */ } 

Yours faithfully,