I understand the advantages of using ems in favor of static measurements like pixels and points, but why do most of the CSS people out there (SO excepted) prefer using ems instead of % values?
Thanks!
A:
I would imagine that one reason is that a lot of web designers started out as print designers, and so are used to ems as a unit of measurement. That's certainly the case with me.
Skilldrick
2010-02-01 13:26:57
+1
A:
Ems are based on a known and consistent value (the font-size) whereas percentage is based on the size of the container. It's much harder to design and understand CSS when the basis of your dimensions and sizes is changing depending on the context (which element/container you are in).
Nate B
2010-02-01 13:27:08
Thanks Nate, I'm still a little bit confused with the answers you and @David provided, if you could shed some more light on the subject I would really appreciate it.
Alix Axel
2010-02-01 13:41:00
+9
A:
For font sizes:
- em and % are both relative to the font size of the parent element (i.e. 2em and 200% always give same result)
- ems have a history in typography (although a CSS em is not the same as a typographic em)
- Browser implementations of CSS have fewer bugs with % than with em
For everything else (e.g. the width of an element):
- em is relative to the font size
- % is relative to the parent element
… so they do completely different things and need to be considered on a case by case basis.
David Dorward
2010-02-01 13:27:47
Thanks David, so you're saying it's safer in terms of browser compatibility to use `%` instead of `em` for font sizes? Also, if I specify a font-size in `%` it'll be calculated using the base font size or the containing block?
Alix Axel
2010-02-01 13:38:05
Neither. Font sizes specified as a percentage, like em, are relative to the font size of the parent element. (Ooops, that highlights an error in my answer, I'll correct that)
David Dorward
2010-02-01 13:40:04
“Browser implementations of CSS have fewer bugs with % than with em” — Really? Have you got any examples of browser bugs with either?
Paul D. Waite
2010-02-01 13:44:05
@David: Thanks. To recapitulate: `em` sets the font size according to the **base** font size while `%` sets the font size according to the **parent** element / font size?
Alix Axel
2010-02-01 13:44:41
Is there a definition for "base font size"? The size specified on the `<body>` tag? I always thought em and % were exactly the same, just different units...
DisgruntledGoat
2010-02-01 13:52:42
@DisgruntledGoat: I consider the base font size as the font size specified in the highest element in the DOM hierarchy, not sure if I'm right though (probably not).
Alix Axel
2010-02-01 13:58:06
@Paul - the biggest one is probably Internet Explorer (I can't say what versions off the top of my head) where, with font size specified in ems throughout, changing the font size using the view menu will resize by much more then expected (so "small" becomes "microscopic" and "large" becomes "gigantic".
David Dorward
2010-02-01 13:59:16
@Alix - No. When setting font size, both units refer to the font size of the parent element. When setting other things, em refers to the font size of the element.
David Dorward
2010-02-01 13:59:49
From the specification: The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.
David Dorward
2010-02-01 14:01:30
@David: Hope you don't mind, I added a couple of small bits of clarification to your answer. Thanks for the explanations!
DisgruntledGoat
2010-02-01 14:09:04
Wrt em's in IE (actually, with fonts in general!): it's by default **inherited** from parent on child. Thus, a parent and child with 0.75em would effectively end up 0.5625em for child. You see this good back in nested tables where the size is definied in `table`. A fix for this is to define font size **explicitly** on parent table or both tables **separately** (by id or class) and thus not the general `table` element.
BalusC
2010-02-01 14:17:17
@David: ah yes — I always thought that happened whether you used percentages or ems, and was based on setting a percentage/em value for the `body` element that was a long way from `100%`/`1em`. I never played around much with that one though.
Paul D. Waite
2010-02-01 15:44:36
A:
Give a page 3-column layout with 25%/50%/25%, give it font which allows for 6 lines of article (16% font-size), with 5 articles per page (20% height)
Now imagine it on an embedded device that has screen resolution of 320x200px
SF.
2010-02-01 13:30:02
It doesn't make a whole lot of sense. That type of device generally won't be rendering a screen media stylesheet (unless it has a virtual view port and zoom facility, like Safari for iPhone). Font sizes defined in percentages are relative to the font size of the parent element, not box size of the viewport or the container.
David Dorward
2010-02-01 13:38:44
Sorry, but not once on I faced webpages that were completely unusable on a Netbook, simply becase the authors assumed "everyone is using big screens" and the page was either didn't fit on the screen while disabling scrolling, or scaled down to a size that made them unreadable.
SF.
2010-02-01 13:54:54
I wasn't aware they made netbooks with resolutions that low (and I've got a very early netbook). The choice of unit isn't going to be a magic cure all or kill all for getting a design to work on a wide range of viewport sizes though. It is how the chosen unit is applied that matters.
David Dorward
2010-02-01 14:05:34
320x200, maybe not. 640x480, yes, and many pages make failed assumptions about your screen size. Of course there is no reason to ban "%" or even "px", but a layout that uses strictly "%" with no regard for reasonable minimal sizes is a failed one.
SF.
2010-02-01 16:25:24