I am finishing up my first product-based web application ... I am putting all the finishing touches on the site, mainly the CSS.

I have read a variety of topics on font best practices, some say use em, but then I see pixel also used in their CSS, some say use percentages, but sometimes that may distort other visual elements if the user zooms the page.

So my question is, just what are the best practices for fonts? Is there the proverbial silver bullet that will work with any situation?

I am really striving to keep the CSS simple!

11 answers

3
points
This was chosen as the best answer

Good question. Short answer, Em's relative, pixels are absolute in size.

When you nest font-sizes, you need to do some calculations with ems, because they will be relative to what ever font size you set for the container, where your text resides (relative to the width of the 'm' in your current font size). This will very quickly become a bag of hurt.

Pixels are absolute, eg. 12px are always 12px, no matter where you are on your page. This makes the code much easier to read, for yourself and others.

One of the arguments for using ems, instead of px, is that older versions of Internet Explorer didn't scale text set in px, when the user selected another font size in the font size menu--modern browsers will handle resizing of px just fine.

Personally, nowadays I use px for font sizes.

Answered over 7 years ago by Martin Gausby
4
points

This is the simplest, sanest CSS text sizing method I've found. It seems the man has done his research!

Hope it helps.

Answered over 7 years ago by James Spencer
Emily G 620
4
points

The problem with using px is that ie6 will not scale the font size if it is hard coded to px.

I use

body {font: 80%/1.40 arial,tahoma,geneva,sans-serif;}

and then base all other font sizes off that.

h1{font-size: 2.0em;}
h2 {font-size: 1.7em;}  
...

That gives me the most consistent cross-browser sizes.

Answered over 7 years ago by Emily G
4
points

The standard browser font size is set to 16px. I always set the font size of my document to 100%, and work from there.

body {
  font-size:100%;
}

If you would want a 10px body copy you'd just calculate 10/16 = 0.625 (desired font size / base font size). Which you can then apply in for example your container:

#container {
  font-size:0.625em;
}

I got this method from an alistapart article called How to size text with CSS.

Answered over 7 years ago by Jesse Vlasveld
1
point

I like the percentage then ems method, but I find it easier to set the percentage to the size of your body copy. If your text is mostly going to be 12 px, use

body {
  font-size:75%;
}

Then I use this to work out the rest. This means less work fixing nested elements (the problem Martin highlighted).

Answered over 7 years ago by Gavin Cheyne
danwellman 5600
1
point

brilliant and very recent web-typography article on nettuts: 6 Ways To Improve Your Web Typography

Answered over 7 years ago by danwellman
Andy Ford 533
1
point

If you're using relative units (ems, %, etc) the formula to remember is:

desired effective pixel size / current effective pixel size = multiplier

For example, if your current effective pixel size is 12px, and you want 18px line-height:

18 / 12 = 1.5

So you use: 'line-height: 1.5;' (note that line-height is relative, so a unit [px, em, etc] is not required)

Since I hate doing simple math over and over, I put together a lookup table called EmChart that helps with this.

Answered over 7 years ago by Andy Ford
gy 15
1
point

Taking a cue from Zeldman's to Hell with Bad Browsers, I use px to size my fonts. Most modern browsers can rescale the entire page (as opposed to the old days when just text was resized).

Answered over 7 years ago by gy
0
points

I use the YUI CSS framework which includes a font system that handles font-sizing issues to get them identical across all the A Grade browsers. Then you just follow their system for specifying sizes relative to the base 13px size.

Answered over 7 years ago by Daniel Ryan
-3
points

It partly depends on your design. Is it fluid, fixed? Generally speaking, px-based sizing should be used for fixed layouts; especially where text sizing might break your design. Em based sizing works great in fluid layouts; which some might say is the only way to go ;)

REFERENCES
How to Size Text in CSS (on A List Apart)
csstypeset
TypeChart

NOTE
- Make sure to test on multiple browsers/platforms and make sure it looks and functions they way you want it to.
- In some versions of IE, pixel-based font sizes will not scale.

Answered over 7 years ago by Andy Fleming
  • Why the down votes? Rich Bradshaw over 7 years ago
  • Because web design shouldn't break if the type is scaled. It's about accessibility. Daniel Ryan over 7 years ago