px vs em revisited
- Started
- Last post
- 22 Responses
- ********
One of the mantras of web design has been that you should always use ems for text size rather than pixels. This article breaks it down and concludes that users need to be able to resize text, and only ems will provide this option on IE 6 and IE7.
http://www.alistapart.com/articl…
Well, OK...but now if we look at the latest browser stats IE6 is almost gone and IE7 has shrunk to 10% of the market. Once these browsers are gone, as seems likely within the next year, is there still any argument to be calculating ems for things like font-size, margin and line-height?
- ********0
P.S. This might seem a pointless topic but I am designing some Wordpress themes and have always scratched my head a bit at the real best practice on this. Calculating ems and getting everything to line up in accordance with the grid is a headache to be honest.
- px for horizontal, ems for vertical. Allows better text sizing while preserving the layout.ETM
- ETM0
A lot of people I have noticed are getting away from it and back to pixels units again. Most devices and browsers have become quite good at knowing how to scale most units be it px or em etc.
Personally, I do use it for text, setting the baseline in my CSS reset as 16 px is 1 em (divides by 4 so good for 0.25 point increments).
In layout, I typically only use ems for vertical spacing around text (top, bottom etc.) and use px for left and right measurements. My thoughts are that if someone does scale the text, I may not want by margins along the side to get any bigger and squish things, but I do want, say the distance between paragraphs to scale with the text size change. A 1em gap between paragraphs will always then stay at the same ratio. If it was fixed at 10px and the browser or device left that as is, then the paragraphs could crowd.
- after reading this i feel like i owe you something. so fucking informative.kingsteven
- That's a good point. Never done it that way before.nocomply
- ETM0
To add, em units can be a PIA as they are relative to their parent element. So 1 em measurement doesn't also mean the same thing in deeply nested elements depending on the hierarchy and what has been defined and inherited along the way. Pixels are absolute, so 12px are 12 pixels, regardless of the parent/child relationship.
- Agreed, maybe you read this article too a couple years back
http://24ways.org/20…******** - Possibly. I have no idea where my methods come from anymore. :)ETM
- Agreed, maybe you read this article too a couple years back
- ********0
ETM, you obviously know your stuff and the above represented my thinking too for a long time. But when you get down to it, what was the reason for using ems in the first place? The rationale I always heard was the one in the A List Apart article linked above - preserving the ability to zoom text in older version of IE.
So considering hardly anyone uses those old IE browsers anymore (and Microsoft has officially started a "deathwatch" for IE6), what's the point of going to the trouble of using ems?
- I still feel in some regards it's a best practice, but I do agree it's importance is fading.ETM
- ********0
I get the sense that a lot of web designers use them because it's the "right way" to do it - but if there's no actual rationale anymore, might as well use pixels which are a straightforward measure of vertical space and do scale up in all modern browsers.
- ********0
Ok, but why switch back to pixels? Is there something wrong with ems?
- Only that they're a bit more convoluted to me (and most people I know).nocomply
- ********0
Personally, I find it a bit clunky to calculate em margins. Because like ETM mentioned the numbers become relative to the parent element. It just seems like more work than necessary for no reason.
- I never used ems for margins/padding. Only for fonts.nocomply
- d_rek0
WHAT WOULD JAKOB NIELSON SAY ABOUT THIS TREACHERY????
- haha. probably nothing. he's busy with his latest promotional photo shoot********
- haha. probably nothing. he's busy with his latest promotional photo shoot
- nocomply0
I'm glad to hear I'm not the only one who has lost hours contemplating this issue!
About 6 months ago I thought it was time to revisit the issue, and I made a little cheat-sheet / explanation web page about it. This would make a great blog post, but I never have time to blog, so I posted it here. It might make more sense to me than to others, but feel free to ask any questions and I'll try to answer them.
http://evanwebdesign.com/font-si…
My method still uses ems, but like you said that's really only for IE 6 and IE 7. I made the conscious decision to stop supporting IE 6 for 2011, and there really aren't too many people browsing in IE 7 anymore either.
I think that for 2012 I'm going to switch back to px. I like the fact that px do not have the inheritance issues that ems do. For me, that makes them easier to work with.
Here's 1 question though that I don't know the answer to... How do px play out on mobile devices like iphone/ipad and android or blackberry phones? I never did any research or testing on that, but I'm guessing that they can handle px no problem. Am I correct?
- ********0
lol, I think this is one of those issues people tend to BS their way through because few really have a good understanding. What's more, if you look at the majority of well-designed sites, even by so called standards experts, most of them use what (to me) seems like a nonsensical combination of em and px even for vertical increments.
- You callin' me a BS'er?!?!
j/knocomply - haha, not you********
- Just commenting on the seeming lack of straightforward info out there...same thing you found I guess********
- You callin' me a BS'er?!?!
- raf0
I never used em's other than sometimes for line–height or when working for an agency that used them as a rule. To me they were part of the pile of nonsense that went along the wave of thoughtless CSS evangelism some 5-8 years ago.
- adev0
Just use <font size="2"></font> and call it a day :)
- hans_glib0
----- get rid of stupid chinese (button blocking) thread bump -----
- hans_glib0
----- another bump to clear the chinese thread -----
- 3030
I switched back to PX again. I've used Em's for a while I find them tricky to use as they are relative. For line-height I use values without units:
line-height: 1.5. It does the job for me.What ETM said, it is good to use EMs for vertical spacing though.
- animatedgif0
ems for interface layout are irrelevant now, only used to be used because IE wouldn't scale up text/interface when you change the text size.
Nowadays browsers do that for you and zoom the page.
I'd only use them for things like line height
- stewdio0
@ETM I like your thinking.
I had to revisit this topic myself last autumn and after much futzing came to a slightly different conclusion which was to set all type sizes in points. (I can already hear a collective gasp from my fellow RGBers!) The reason is that font hinting seems to be at its crispest at regular point sizes. I've tested this a few different ways and using a regular point size always yields the sharpest results.
But for leading (line-height) I use pixels. This is so I can create a baseline grid that images and other non-type elements all align to. Although no method is perfect I've been happy with the results both in regular browsers and on iOS.
This hodge podge of counter intuitive CSS units is so frustrating. Would be lovely to spec out a whole new CSS system. Some combination of http://lesscss.org and more consistent units.
- Stugoo0
I've always used ems for font size, the finest way to do it is to set
body {font-size : 62.5% }
then
1em ~ 10px.
so
1.6em font size gets rendered as 16px.
Job done.Regardless, with reference to desktops & tablets, width is the important constant.... keeping sites for 1024 width has been the lowest common denominator for a good 8 years now, and thanks to apple probably will be for the foreseeable future.
As for vertical content, a good developer never explicitly sets the height, but perhaps uses a min-height instead.
Thus have never really had any difficutly with ems, except when nesting elements semanticly and having to change the font size.
- lukus_W20
I agree - I think ems are worth sticking with.
Also, if at any point you want to make your text larger or smaller, you can scale everything up or down by changing the reference size that an em is based upon. It's a system that is built for flexibility. Switching back to pixels takes this flexibility away.
/* If you have problems remembering which em values are needed for particular text sizes, just add a crib sheet at the top of your CSS file as a comment. */
Also .. compose according to a vertical rhythm: http://24ways.org/2006/compose-t…
- raf0
Interesting what you wrote about setting font size in points Stewdio.
Does the 'better hinting' observation apply to 'native' font sizes only or odd ones also?
Does anyone else set font sizes in points?