Sane CSS Sizes

..wherein we present a method of text sizing in CSS that actually works consistently across our browsers without offending designers.

This is just a little something I've been meaning to put online for folks starting CSS. It's my generic text styles template. Due to browser shortcomings, what should be pretty simple is an unfortunate hell when you're new to things.

The short history of CSS text sizing involves a number of issues. First is that the browser defaults are huge, like 200% of program toolbar font. Absurd. So designers made text smaller, and they found the only thing that worked consistently across browsers (which in those days meant IE and Netscape) was to set it in pixels. Which could not be resized in IE PC, presenting an accessibility problem. Ems worked, but only down to 1.0 in IE PC, and 1.0 is the big default again. Sub 1.0 ems went microscopic. ALA did a nice article on how to use keywords, which was great but didn't work for Opera 6 PC. (How I can tell you are using the ALA method: It's like being slapped with an eyechart.)

Anyhow, I played about and found you can make a nice ems stylesheet with P text at 1.0 em, and then downsize the whole thing by selecting size in BODY with %, like 76%. It's simple, easy to change, and works for everything. Score 1 for late nights and coffee. Enjoy.

This template uses that method, is already formatted for easy reading of full-width text pages, and it has some useful comments in the code. It's what I use as a typography starting point.

And if you're curious just what does happen with the other text sizing methods, here's 264 happy little screenshots to look at.

Update! I have made yet more happy little screenshots to explore browser inconsistencies when you use something other than 76%.