View Full Version : font size and line height irregularity.

02-26-2008, 12:20 PM

I have discovered that I may have set my css up wrongly.

Should the body element be set to a fixed size, say 12px, or 1em?

I seem to get better result with body {font-size : 12px }, as the base size for a page and then to vary it as appropriate with either {font-size : 0.8em} or {font-size: smaller}.

I had set the font-size like this:
body {font-size:1em}

I thought that this would enable individual users to see the size as they choose, using either their own browser settings or adjusting to larger or smaller (in the browser), depending on their requirements. However, a customer rang today and said that the lines looked squashed because the tops of tall letters, were touching the tails of other letters on the the line above. So I have now set the body {font-size : 12px} and then used em's throughout the rest of the page. It still looks fine in my browsers but, is this correct/best?


02-26-2008, 01:37 PM
hi i think you right setting you fonts to em, and making structure px, what i think you may want to try is in your html body set


html, body{font-size:80%;}

p{font-size:1.2em; line-height:1.2em;}

so you have to set your font sizes then for the attribute you need 1.2 em is about 12px supposidly, thats how i did it. and set the line heeight to what ever you neeed.

get back to us if you get undesired results!

i did sum more research on this and ems are dynamic meaning you can resize them say for accesability, px are fixed at that size and should be used for precision if you have fixed width containers.


info here about that sort of stuff as well!


02-26-2008, 05:44 PM

IE doesn't like fixed font sizes or ems as the first measurement. If you want to adjust the line-height, I would use a unitless measurement.

body {
font: 100%/1.8 'lucida sans unicode', verdana, sans-serif; /* 16px */
/* It's okay to use ems from here on */
p {
font-size: .817em; /* 13px */

And setting both html AND body to 80% would make it just about 10px on default sizing. You might as well just put .625em to begin with.

Anyway, if you want to see what ems can REALLY do, try resizing the text on the link in my sig. Pretty.