What font / text size online and how to set it in the CSS

Setting website text sizes seems like a fairly straightforward subject. Yet I thoroughly confused myself for a good couple of hours while trying to figure out how to answer my friend's question. I finally found my simple answer - Set your font sizes in CSS and use percentages or em units.

Colour by numbers has never been this easy

This all came about as my friend sent me an email asking, "What's the appropriate text size for websites?" My first thought was, "Clearly I’ve received an email not destined for me, I’ll now redirect it to someone who actually knows something about building websites," but then realising all my techy friends would answer me in a language light years beyond my understanding I’d figure I’d try work it out myself.

Now as I’ve discovered this question is completely unnecessary once you understand how text size should be set in CSS.

You can set the size of your text in three ways:

• Units: ems, points and pixels (I had no idea what em size was either, look it up on Wikipedia)
• Pre-defined keywords (like small, medium, large)
• Percentages

As far as I can tell most websites seem to use a combination of all 3 methods, indeed when it comes to using units some websites also seem to use a bizarre combination of ems, points, and pixels, effectively hacking text size into the web design.

Clearly this is not the way nature intended websites to be built. The W3C suggests you use a size of 1em (or 100%) and also states that you should never use point size or pixel size.

Now there's a reason not to use point or pixel size. The first and probably most important reason would be that by restricting yourself to an absolute length you are preventing people from changing text size themselves using the text size function in their browsers.

The second reason would be because a specific set size, ie.10pt or 5 pixels, may look good on your computer in Internet Explorer but open the same site in Firefox, Opera, Chrome or Safari and the size may look smaller or bigger as different browsers render text differently. The same may happen across different computers and operating systems.

As the W3C page says, if you want different sizes throughout your page - like a bigger heading, smaller footer text - then set the base text size to 1em (or 100%) and then adjust the other elements by a percent of the base. This means that regardless of your computer settings everything is in proportion. So to have your main text at 100% you may want your main heading (h1) to be a lot bigger so you set that to 150% for example.

Go to the W3C site for more information on CSS and specifically setting font sizes in CSS.

Related posts
SEO problems of white text on a dark background (Jul 2008)
Improve and check your website's readability (Mar 2009)
Check your web design in different browsers online (Jun 2009)