CSS "EM" or "%" today?

[DougWD]

I've been looking for recent articles on size and spacing for today's css and browsers, but having a hard time connecting with something in the last year. What I've been reading is the standard is becoming ems, but IE6 still has problems with it and even IE7 scales up and down to abruptly.

So what's the consensus? % or ems today? I have my own site using % for text size, and spacing px, but I've moving the spacing to ems tonight, but now I'm not sure. I would love it to be at a time where we can use one measurement for all elements--are we there yet?

Thanks a lot for all who reply. I really appreciate it.

[simonuk]

You will get various answers for this and in all honesty both EM and percentage are both vastly more preferably than fixed sizes.

I know that swa66 disapproves of the way I do it but I actually use both.
I set the body text size at 62.5% and then use EM's everywhere else. At that percentage:
1em = 10px
1.1em = 11px
1.2em = 12px
and so on...

While I understand his approach I personally like this one because I know all browsers will display the same size and will scale appropriately.

There will be a few more options and probably a lengthy discussion coming so I won't spoil it by displaying all the options in one post :-)

[DougWD]

What happens if you don't set the body text size? Also, can you simply redefine the Body tag to include the text size % tag?

[edited by: DougWD at 8:03 am (utc) on April 18, 2009]

[mihai2u]

Doug, if you don't set the body text size to 62.5%, then you would have to do a bit more math when computing the font sizes, because you would have to start from a base font size of 16px
1em = 16px
0.87em = 14px
0.62em = 10px
etc.
As you can see these numbers are a little bit uglier compared to 1.1em = 11px from above.

I prefer using the 62.5% on the body and use ems for both font size and spacing - I like the spacing to increase when font sizes are increased.

[DougWD]

Why not just do it by look on your screen? Then just duplicated that em decimal for the same font size/spacing?

[idfer]

I'm confused, if you set the body text size to 62.5%, isn't that relative to the default font defined in the browser? So if i configure my browser to use a font size other than 16, when i visit your page, the calculations will be all wonky. Or am i missing something?

[DrDoc]

No, you are absolutely correct, idfer.

Using relative sizing in an attempt at fixing dimensions is the wrong approach! You might as well use pixels, then.

Personally, I tend to set the overall font size for the body (if at all) and then use

em

from that point on. Older versions of IE had issues with

em

being used as the main dimension (for the document-wide font size) if the font sizing was changed. So, you should probably use a percentage or pixel size for the body.

As for the rest of the document, it really doesn't matter. Personally, I prefer

em

, as it makes sense for all sorts of other text related properties where

%

would fail.

Text indent, anyone? 3em or 300%? You get the drift.