What is the current standard for setting font size on a website?

Question

For example is it:

body 100.01% and all other font sizes in ems? (is this old fashioned?)

or simply set a font size in pixels e.g. for body 12px like apple.com ?

Thanks

Answer 1

I don't know about standards or best practices, but I've noticed one thing that you may find useful: different browsers use a different default font size, ranging from 12 to 14 pixels. This can be really bad for your layout. When I do the styling, the graphics guys always send me the font specifications: font family, colour, weight, style and size in pixels. Whenever I do 12px instead of 11px, they bash at me - so I've long been using exact pixel values exclusively. And everyone seems to be happy: the designers, the clients...

Answer 2

There isn't a standard. It's more of personal preference. Different frameworks do it in different ways, but I prefer to have my base font size at 13px and just use pixel values for anything that differs. It used to be that you should use a fluid unit such as EMs because some particular browsers would not resize text with px values, but I dont think it should be any concern at this point in time.

Check out some of the popular CSS frameworks out there and take queues from them. (YUI, Blueprint, 960.gs to name a few)

Answer 3

There are a few different approaches. Currently, I set the body in px and then use em calculations for everything else down the hierarchy ... this way, everything nicely cascades if I ever decide to change the base font size of the site.

Purists will tell you to accept the browser default and respect the user's preference, but pragmatically speaking designers and business managers will balk at this, and you will too because you'll be fielding constant complaints about why something looks different. Sad but true.

At one time (2005-2007 era), you could set the body to font-size: 76%; and this would actually get similar sizing across all of the major browsers, but I'm not sure if this is still true.

The only reason I know of that these methods were popular--as opposed to specifying px--was that Internet Explorer would not let you adjust the text size if specified in px, causing accessibility problems. While that is still true in Internet Explorer 8, one could make the argument that the vast majority of people are using the full page zoom features of the browsers (and pretty much all of them have this feature now, unlike in the days of Internet Explorer 6) so this bit of advice is probably more pedantic than useful.

Answer 4

The "standard" depends on your target audience.

Past practices include resizing body to 62.5% (making the default 16px font 10px) and using EMs to scale from there.

Pixel sizing is becoming more common as newer browsers allow for zooming of all elements rather than just adjusting text-size. In particular, older versions of IE (7 and below) didn't resize fonts set in pixels.