How do you make web text the “Right” size?

You can't tell from bibleicio.us but i've been (re-)learning all the in’s and outs of web design. A lot has changed since the HTML 1.0 days when I got started and while I did geeky backend enterprise database number crunching stuff I lost my edge for the latest greatest in design.

While working on my day job a wonderful fundraising e-store. I've known for a while that my font sizes were different between firefox, ie, and safari. Now my layouts fairly flexible so I haven't worried about it. Now I'm trying to take things up another notch so I went to the web in search of the BEST WAY TO DO THINGS.

Here is what I found and what I decided. I hope it helps those aspiring web designers out there wired Christians and those horrible heathen webmasters as well (sarcasim for the humor impared - just a disclaimer for the bible all the time crowd this is a tech post)

Here's a quick summary of what I know about specifing font-size using CSS.

Problems. Reasons why one size doesn't fit all.

1. Browser inconsistency.
   All of the top browsers Safari, IE 5/6/7, Firefox – not to mention the others Opera, Konqueror, etc, have different default sizes for body and header text
   
2. Operating System differences. Mac, Windows, Linux handle fonts differently and make different assumptions about computer screen resolutions.
   
   Windows makes the assumption that users have 96dpi resolution and also has a Large font size setting for 120dpi screens. I used to use the Large Setting but it was auto-scaling all of my graphics while web surfing making for some really jagged and pixilated garbage (especially for graphics as text at small point sizes)
   
   Mac pretends that everything is at 72dpi and converts to the actual screen resolution behind the scenes. Users have an option to set their actual resolution under preferences.
   
3. Actual Screen Resolutions are all over the map.Visitors to my side have 50% at 1024X768 with 15-20% on 800X600 and the rest on high resolution some of them wide screen all the way to 1680X1050
   
4. Users can change the default font size. Browsers allow users to specify thier preferred size and scale it up or down depending on their preference. Of course how this actually works varies slightly from browser to browser.

CSS Options. Our choices for sorting this out

• Points - This is what we think in, use in word processing 10-12pt for body, 9pt for fine print. Problem: you never know what they will be on a given browser, OS
  
• Pixels - Usually the number of dots on screen. (IE7 and opera have a zoom feature). Firefox allows user settings to scale text. Problem: IE Users can’t adjust size for their high-resolution monitors
  
• Percentages - Relative measure to the default font size. Problem: The default font size can be all over the map.
  
• Em and Ex - Relative measure based on the size of the characters of the container element (or the default font). Works very similarly on all browsers. Problem: this can get very confusing with a complex layout and require many more style sheet rules – one to size headers inside a certain div and one to size headers outside the div.
  
• Keywords - xx-small, x-small, small, large, x-large. Relative sizes that the user can scale up or down. Problem: only a few sizes and most of them are too large. "Like being slapped by an eye chart"

Conclusion {font-size: 12px} {font-size:75%}

This is far from the definitive answer as web design has been and is a moving target. But I can say this is what works for me.

Pixels for fixed portions of layouts. If you specify the width in pixels you should probably specify the font in pixels as well. This would be most commonly used in sidebars, headers, ect. This allows tight layouts with the text to match the size of your graphical elements.

Percentages for elastic or fluid portions of layouts. There are other portions of your layout that flex. Elastic layouts use em’s as the measurement to allow adjustment if the user changes their font sizes. Liquid layouts allow users to resize their window and allow for wide screen and narrow window viewing – they generally use floats or percentages to specify widths. Using percentage font sizes for these layouts will give you the most consistency across browsers, allow the user to adjust their font size, and eliminate any confusing inheritance or nesting issues.

Also check out the eye chart method at ALA especially if you are dealing with older browsers.