em vs pixel vs %
- Started
- Last post
- 23 Responses
- nearestexit
When specifying font size in a stylesheet, which should i use and why?
- Mojo0
this probably isn't helpful, but it depends.
- d_rek0
Yeah, depends on if you're making a fluid or static page... percentages are good for fluid, pixels are good for static or keeping things consistent, and I still cant' figure out why they let you use EMs when designing for the web...
- JG_LB0
I usually go with pixel because most people I ask don't know what em's are...
- Milan0
pixels
- TheBlueOne0
I bounce between pixels or ems depending on the design and my mood...
- ephix0
why dont know about em? is it the same as pt?
- Milan0
browser text-size increase should never be used anyway, as it completely breaks the layout in any site... "blind" people should use zoom instead
- if it breaks the layout then you're doing it wrongacescence
- sorry not trying to sound mean!acescence
- There are times when text-size increase is good, and there are ways to avoid breaking the layout.ismith
- i agree. if a layout breaks upon text-size increase, then it's probably not coded properly...nearestexit
- at least in terms of accessibility.nearestexit
- Yeah, make your site resize gracefullyyaphi
- ismith0
I almost always use EM, but I find myself using pixels as well. Never percents.
- 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
- Chazolta0
px
- trooper0
body{font-size:62.5%} = 10px or 1em - work it out from there ;)
- airey0
there needs to be rappers called all 3 of these names. then this thread would be tre-cool instead of uber-nerd. i hope in the next life i'm not an uber-nerd. if anyone's listening up or down there!
- 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.
- nocomply0
Obviously I try to avoid px because it does not scale in IE 6 and IE 7.
IE 6 and below have problems smoothly scaling font sizes in ems.
so here's what i do:
html {font-size: 100%;}
body {font-size: .75em;}
This sets the default font-size in most browsers to about the same as 12px.
From there I set the font size in divs using ems as necessary. For example to make the font in a side-column looks more like 11px I would do something like:
#side_column {font-size:.92em;}
- nocomply0
In all honesty though, don't listen to me...get it from the source:
- 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.
- svenreed0
i recently started 'reteaching' myself css and html. one of the first things i read from various sources, including qbn, was to use em's and avoid pixels.
also remember, not all users have their fonts set to standard size, some people are reallyyyy old, or just can't see well. hehe.
- nikdaum0
In a related note, has anyone seen how Firefox 3 scales pages. Instead of just the text, the whole page scales up. The size ratios off all elements on the page stay intact.
- allworknosleep0
I just finished my first website using all em instead of pixels.. it can become a bit tricky but its definitely worth it.