em vs pixel vs %
- Started
- Last post
- 23 Responses
- ian000
"Our task was to find a way to size text that allows designers to retain accurate control of typography, without sacrificing the user’s ability to adjust his or her reading environment. We tested various units across common browsers. Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers."
– http://www.alistapart.com/articl…- good article. mostly because it agrees with what i thought was the answer.nearestexit
- mjbauer0
If you are talking only about typography, you use a pixel height in the body declaration, because this makes it so you can start from the same point in all browsers. Then you use ems for font size and line-height, letter-spacing, etc. because when you adjust one, the others will change in relation to it.
Ex: You set your <p> font-size to 1.2em and your line-height to 1.4em (these are based on the 12px height that you specified in your <body> style). Then if you decide later to change your <body> font size to 11px the other measurements change in relation to it, and you don't need to edit those styles as well. If you used pixels on everything, then you would need to change each instance of font, line, and spacing measurement if you decided to change one, because they aren't relative measurements.
I'm not sure why A List Apart suggests using a percentage for your <body> style, because font sizes differ from browser to browser, platform to platform. It seems like it's best to unify this by setting the pixel size from the beginning, but maybe I'm missing something that would explain why their method is better.
Either way, this method has worked really well for me.
- 1pxsolid0
The base declaration for 'body' should be px or a named value like 'small'
Then all your other styles should be percentages. And they represent percentages of the value set in body.