CSS Text Sizes

I wanted to write this quick post so that I can reference it myself later.   It seems that selecting a font size for a web page is no easy task.  When printing a document, you specify the point of the font (72 point anyone?), and print.  If someone can’t read what you’ve printed, they either hold the page closer or further away from their face.  Creating text for the web is a little different, as many people can alter the size of their font to suit their tastes.  What might look like a good size to you when designing a page, may be way too large or small for others.

To complicate things, there are 8 different ways to specify fonts on a web page: em, ex, px, pt, pc, in, mm, and cm.  In addition to that, you can use keywords like large, small, larger, and smaller.  Just for fun, the main browsers (Internet Explorer, Firefox, Safari, Opera) have their own way of handling some of these things.

Just how do I get the font to be a readable size without looking like a billboard?

I came across a solution today while researching the topic, Owen Briggs suggests setting the paragraph (p) font to 1em, and setting the font size to around 76% in the body style (oh yeah, did I mention that you could specify percent too?).  I look forward to trying this, and hopefully making the web a more readable, and accessible place to hang.