Well, changing from PX to EM's often requires re-adjusting the entire layout. Generally speaking you've got problems as 12px is tiny little inaccessible garbage. usability studies like this one: http://webmarketingtoday.com/articles/html-email-fonts/ In that article Dr. Wilson determines than 10pt is the best size for content in a sans-serif font. I agree with this but many people THINK he's talking about PX, which is wrong. The size he came up with at 96dpi would be 85%/0.85EM off default, 14px, or "small" if using named sizes. (really funny when you do the math and find out 10px is 7.5pt, WAY below the 10pt in the article). Of course, on my system you say 10pt you'll get 17px... and on my media center 10pt is 21px. That's WHY we're supposed to use EM (or to a lesser extent PT), so that it automatically adjusts to browser and/or OS preferences. This should be MORE important as things like higher resolution displays comes along. (sadly most people are just saying "let them zoom" or "let the browser handle it" -- the result being utter rubbish) Your 12px is well below that. To me 12px is bare minimum to be used behind a image replacement in all caps, NOT a size for content text. Generally I try to avoid changing the font size on anything but headings -- your ".block" class seems a bit vague, and that without the markup that style is applied to (much less the entire site/layout) it's hard to say anything really meaningful about what may need to be done... What you have presented though does trip a few red flags -- one of which is changing the font-size without changing the line-height. This can result in VERY broken layouts for some users (more so if you are using %/em like a good little doobie) -- there is a MYTH that if you don't declare a metric on the line height, aka "line-height:1.5" instead of "line-height:1.5em" that it will inherit properly, but no matter what the asshats on certain websites claim, that does NOT work reliably cross browser. From what you have shown so far, the first step would be to change the declaration on BODY to something like: font:normal 85%/150% "Lucida Sans Unicode", "Lucida Grande", sans-serif; Which is pretty much what I use on most of my websites, only difference being I usually use either arial,helvetic,sans-serif or "segoe ui",lastresort,sans-serif as my font stack. Basically for most of your content leave the size the hell alone. Usually for headings like my h2 and H3 I like to use 125% and 150% -- the reason being it's easier to translate 1EM to 0.8 or 0.66 when the scale changes. That's one of the things that's hard to wrap your head around at first. See this example: CSS: div { font-size:125%; line-height:150%; } Code (markup): Markup: <body> <div> 125% body size <div> 125% parent size == 156.25% body size <div> 125% parent size == 195.3125% body size </div> </div> </div> </body> Code (markup): It's a multiplier based on the parent element's value... BODY's parent is the browser (or HTML) so the 16px default most people get, 20px lf/120dpi users like myself get, 24px to 32px common to ten foot interfaces and so forth ends up multipled by your % or em declaration. In case you didn't notice it, 1EM == 100% on font declarations. Minor detail that sometimes gets lost in the shuffle. I usually use % on font declarations just because I don't like getting floating point involved when I don't have to, but to keep it clear I use EM's on paddings and margins since percentages on those are... unpredictable. Typically I prefer to use 1em or 0.5em paddings and margins on elements for simplicity so that they too also enlarges/shrinks based on the user preference. You would also want to switch any width constraints to EM's since if the fonts are going to automatically get bigger, the layout does too! Is your layout semi-fluid or fluid, or is it fixed width crap? IF the latter you're probably going to need to fix that too at the very LEAST making it elastic, though a well done website should be semi-fluid, elastic AND responsive. If you need those explained, ask. Again though to really say more I'd have to see the site in question. Typically if it's a fixed width px metric layout, there are a host of other issues common to such creations that would need to be fixed and/or thrown out completely before even TRYING to make an accessible design and codebase out of it. It's very likely it wasn't built with "progressive enhancement" or proper semantics, and if it's missing those more often than not it's less work to throw it all away and start over from scratch. Which might seem harsh, but if it was built wrong from the start and has deep rooted issues right down to the foundation, what else are you going to do?
The 12px is actually just a tiny welcome message. It's not used throughout the site. The 14px is though. Here, if you don't mind I'd like to show you instead of telling you. It may be easier. I've done a lot of changes on every page using the nifty "change all pages thing". I'll pm you.