• From: Rochester, NY USA
  • Registered: 2005-01-05
  • Posts: 173

Topic: CSS Font sizing methods em or px?

I am a little confused as to the best way to size fonts with CSS.  In my research, I have noticed that one author will reccommend using PX and another will state that em's are the way to go.  I just wish it would be fixed and not have so many options.  One author stated that EM should be used for text, and px should be used for other sizing such as padding and margins.  Is this just a recomendation or a standard?  Say I mix the two.  Will it cause problems. Its one thing to have to work around different browser quirks, but when you have all these other options for sizing things to boot really confuses me.  When I look at what WC3 has to say, They eplain things in such "geek" terms that I have to read it over and over to understand what the hell they are trying to say. lol.  Can anyone put things into laymens terms? 

Say I set a font-family to Verdana...  in a body selector and give it a size 1.0em and later I set the <p> selector to a font-size of 0.8em since the <p> element is a child of the <body> element does this mean that the <p> element will be 0.8 of 1.0? Or better yet, say I set the <body> element to have a font size of 12px and later I set a child element to have a font size in a percentage.  I assume that it take x% of 12 px.  Is this correct or am I way out in left field on this one?

Also, when I size a font using the units em, is this based on the users browser default setting.  i.e 1.0em = default size, and 0.8 = 8/10 of the default browser size?

I'm lost. hmm

  • Registered: 2005-01-18
  • Posts: 1

Re: CSS Font sizing methods em or px?

While a lot of CSS typography is confusing, the best method I have found is the 76% method as detailed at TheNoodleIncident.com.

3 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: CSS Font sizing methods em or px?

Corrected link
http://www.thenoodleincident.com/tutorials/typography/

  • From: Rochester, NY USA
  • Registered: 2005-01-05
  • Posts: 173

Re: CSS Font sizing methods em or px?

Thanks!  That helps alot!

5 Reply by D9r

  • D9r
  • Senior Member
  • Offline
  • From: Atlanta, Georgia
  • Registered: 2004-08-18
  • Posts: 148

Re: CSS Font sizing methods em or px?

Relative units -- em, %, etc -- are generally the preferred option because they are more flexible for various screen sizes, resolutions, and the visually-impaired who need large fonts.  Fixed units -- px -- are good for special circumstances such as making text line up with a fixed object like an image.

There are several posts at Hiveminds.org that deal with font-size:
http://hiveminds.org/phpBB/viewtopic.php?p=29425#29425
http://hiveminds.org/phpBB/viewtopic.php?p=30108#30108
http://hiveminds.org/phpBB/viewtopic.php?p=38289#38289
http://hiveminds.org/phpBB/viewtopic.php?p=38303#38303

Here's an excerpt from my stylesheet:

/* Basic HTML Tags */
html, body {margin: 0; padding: 0;}
body {font: 0.9em verdana, helvetica, sans-serif;}
* {font-size: 100%;}
h1 {font: normal 2.2em verdana, helvetica, sans-serif;}
h2 {font: normal 1.4em verdana, helvetica, sans-serif;}
h3 {font: normal 1.2em verdana, helvetica, sans-serif;}
h4 {font: bold 1.0em verdana, helvetica, sans-serif;}
h5 {font: bold 1.0em verdana, helvetica, sans-serif;}
h6 {font: bold 0.9em verdana, helvetica, sans-serif;}
dt {font-weight: bold;}
dd {margin-bottom: 0.6em;}
Dean
One of these days, I'm going to upgrade my forum.
D9r.com - homepage
Tucker & DeKalb County, Georgia -- news, events, zoning, politics, directory
HiveMinds.info - International Web Developer Forum (lots of smart folks here)

D9r's Website

6 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: CSS Font sizing methods em or px?

Do remember Gecko's rounding problems with anything other than pixels. Using EM's and percentages can result of unexpected gaps and overlaps appearing. If you are going to use em's then i find it better for the initial font size to be set to 10px which ensures you don't end up with fractions of pixels e.g.

BODY (font-size: 10px)
P (font-size: 1.1em
H2(font-size: 1.2em)

That way you end up with whole sizes in pixels and Gecko is happy.

  • From: France
  • Registered: 2004-11-06
  • Posts: 695

Re: CSS Font sizing methods em or px?

And others are not, because they can't resize pixels fixed fonts.

Jeu de rôle en ligne sur table virtuelle ⁂ Shadowrun France ⁂ Chez Blacky

Jérémie's Website

8 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: CSS Font sizing methods em or px?

* HTML BODY {font-size: 62.5%}
Pixels for those that can handle them, percentages for those that can't.

9 Reply by roo

  • roo
  • Member
  • Offline
  • Registered: 2004-11-11
  • Posts: 28

Re: CSS Font sizing methods em or px?

px is the most logical choice for screen sizes.  It's also easiest to use.

The reasons for using ems or percentages or other relative measurements are two-fold:  WinIE can resize text set in relative sizes but not type set in pixels (when the user chooses to alter the font size for better readabiliy); and fans of elastic design that want the entire layout to enlarge and shrink when the user switches font-sizes use relative sizes like ems.

I recommend pixels to people learning CSS because it's easiest to understand, and because they don't inherit their values.  That is, if I make the body 12px, and <p> tags 14px, then all <p> use 14px type.  If, however, I set the body to .7em and <p> to 1em, the <p> is 1em relative to its parent (the body) so it renders at .7em.  That can get very confusing if you have nested elements with different font sizes in ems.

10 Reply by D9r

  • D9r
  • Senior Member
  • Offline
  • From: Atlanta, Georgia
  • Registered: 2004-08-18
  • Posts: 148

Re: CSS Font sizing methods em or px?

Right.  But if someone wants to learn how to do it correctly from the beginning, instead of learning the easy way first only to have to relearn it later and make up for past mistakes, it does't take much more effort to learn how to use relative sizes.  For one thing, it's very easy to avoid (or at least minimize) the nested elements problem by setting sizes as I suggested above (and again here):

body {font: 0.84em/1.3 Arial, sans-serif;}
* {font-size: 100%;}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.33em;}
h4 {font-size: 1.1em;}
h5 {font-size: 0.9em;}
h6 {font-size: 0.75em;}
pre, code, tt {font: 110% "Andale Mono", Courier, "Courier New", monospace;}
small {font-size: 85%;}
big {font-size: 115%;}
Dean
One of these days, I'm going to upgrade my forum.
D9r.com - homepage
Tucker & DeKalb County, Georgia -- news, events, zoning, politics, directory
HiveMinds.info - International Web Developer Forum (lots of smart folks here)

D9r's Website