Don't use em when you really mean %. The only reason em works is because in CSS 1em which is suppose to represent the size of the letter "M" (em comes from "M") is actually equivalent to the font size. So when you're writing 1em you are actually writing "100% of inherited font-size". The em is meant to be used when specifying box dimensions relative to the font-size (which is rare, really really rare).
This hole "you can't re-size it in browser" is a modern day myth that dates back to the stone age, when browsers text resizing was a frontend feature and thus there was still some truth to it. And I wish what I just said was a metaphor, but sadly: Welcome to the stone age!
Will my layout magically not break if I use ems? Of course not, that's just wishful thinking!
Do modern browsers offer text zoom?
In short: not by default. Browsers offer a page zoom by default, and this is buried deep inside the menu bar usually under view. You can expect some of your users to know the shortcut Ctrl+MouseWheel but actual text zoom is more tricky. With the modern trend of doing away with the menu bar (note: as of this writing FF4 beta also does away with it, by default) you should consider users requiring text zoom are those in real need of it. I say this because the trend of tutorials/advice on the net is to simply glorify elastic layout and being able to re-size text but not really the issue. Sadly too many "professionals" in elastic/em/fluid layouts completely miss the point: site should look okey if I zoom to 300% or higher! If it just looks good at things like 130% or 170% that's completely pointless and waste of effort and only really useful when they were stupid enough to set their base font to something like 10px or lower (way too small for large bodies of text).
The other issue is "some browsers don't zoom", out of those IE6 is the only relevant one, because it still holds some small share of the internet. If you think otherwise, you've probably been reading some articles from 2002 or so (ie. 1 years after it's introduction), wake up to reality:
Is your audience using IE6 and does not know any better? Unless you have some statistic backing, assume: NO. Also, should you design for IE6 first? The answer is always: hell NO. Design in the most technically advanced, comprehensive, and standards compliant browser you can find. Usually the tug-of-war is between Safari and Opera. Firefox is not really that far behind but typically implements them as -moz- rules and is slow at converting to non -moz- rules.
What are the chances of someone who is using IE6 to actually know of font-size tools? If in doubt assume Zero. What are the chances of people actually using IE6 (in our day and age) care for font-size of all things? If in doubt assume Zero.
If you do happen to have IE6 users one innocent thing you can do is give them a informative push in the right direction, discretely. Example: "Your browser, Internet Explorer 6, contains numerous security flaws. For your safety and that of your company assets you are encouraged to upgrade (or ask your administrator to upgrade) to a newer version: http://www.microsoft.com/nz/windows/internet-explorer/default.aspx (it's absolutely free!)"
It may also be useful to know the current trend (as per sites like Google) is kill IE6 asap! You are by no means being professional by supporting this cursed browser from almost a decade ago, along with other monstrosities such as IE5.5. Before reading advice in web design, check the date.
How to use various font sizes
pt ("points") is the size for print, and only print! A point is defined as 1/72 of a inch and roughly 0.3527 mm. Never ever use pt for screen styles because the browser will have to guess; and a lot of browsers are really awful at guessing! A pica is 12pt.
I wish there was a polite way to say this, but any time you see points used for screen style (be it a online reset script, vanilla script, etc.) the author was a idiot. Even one simple proof-view should have shown the point measurement is off.
ex (abbreviation of "x-height") is a CSS fancy unit which if you're lucky you might never ever use.
px ("pixel") is the more precise cross-browser AND cross-platform consistent unit there is. While your browser can not know exactly how tall (in mm/inches) a screen is, pixel perfect precision is pretty easy. User pixels in setting (base-)font sizes for screen display of various key elements, in particular when those elements are pixel perfect themselves. A simple example: text on a image. Even if you use only em or % values in your entire code you are still relying on a 16px base set by the browser (when displaying for screen).
% is the relative size. Use % whenever you just mean to say: this many times bigger/smaller then the parent. It can be used as a base and thus the style in theory could be used for both screen and print and other media. But (and this is just my own opinion) you probably want to create a separate style for each media where at the very least you set the most appropriate base font-size and family for that particular medium. It is hardly "too much work".
em (as in "M") refers to the size of the letter M, and is a typography measurement (like point), but in CSS it is simply equal to the font-size, when dealing with screen. If you are dealing with print, god knows if it won't just revert to the typographically correct "size of M" instead of "size of typeface" (remember CSS is not just for screen). It is most appropriate to use a em when specifying a dimension for the enclosing box relative to the text. Use it only when you can't use %, as a percentage is more clearer and better code in general.
named sizes: xx-small, x-small, small, normal, large, etc., should be avoided! You might notice though experimentation that "small" is practically 12px or 75%, but a lot crisper. However, they are inconsistent cross-browser. Small in Firefox is smaller then small in Safari, so never ever use them.
Rule of thumb: always write what you mean in the context with the most concise syntax.
The real question: how do I give my users the ability to resize text
User who need bigger text are users with poor vision. Poor vision should not be confused with being totally blind when text is of a certain size. Given how wide the types of eye problems are, typically offering a small increase in size such as say 130% or 160% or so, is just no where near enough. You are just trying to be fancy, and it doesn't work at all!
What you want is to give your users the ability to resize the text they wish to read. And the recommendation is to offer a simple A/A (2nd "A" should be smaller; complementing it with text such as "normal", "2x larger", etc., is useful). Place this somewhere visible, the most common position is in the right top corner of the content the user wishes to read. The context of "content" is very important:
Users care only for what they want they want to read. They are not totally blind, and you upping the base font-size is not exactly "curing blindness". If you have a title of 50px, yes they probably can see it fine, no need to make it 150px! You can very easily put the font-size switch on the article and have it affect only the body and that will work out great!
Make your site navigation user friendly; if you need a magic switch to make that text bigger for some of your users to read then you probably need to make it bigger by default! Note: a interface that is meant to be used over and over such as a control panel is less affected since your users only have to put on their glasses and read that fine-print one time, but should still be largely easily accessible by all. (I'm referring to techniques of making destructive actions hard to accidentally click, which take precedence over such issues)
If you must make your entire site "elastic" (ie. dynamic based on font-size)
first and foremost make sure if the user was to use one of the browsers No Style or Accessibility Style features (see: Opera) your site looks at least somewhat decent. Users with actual problems (and not just fooling around) are more likely to use those then try to resize immediately.
Next make sure you have a visible switch for resizing text. Modern browsers don't resize text by default, don't assume your users are going to change those defaults.
When users use the switch make sure different levels tweak the titles and various other elements. Make sure everything gets bigger, but make things like titles only grow slightly so they don't just fill the entire screen (assume the users windows is not maximized).
Then, can you worry about every other headache envolved with elastic layout.
Though all this analyze the line-height and make sure to pick a value that scales gracefully for your increments and typeface.
Note: extremely large font sizes are not the rare ones, its the other way around. Typically the preferred sizes are 12px (don't have anything lower for base, ever!), 16px and just monster large.
