font sizes and tricks on converting from quirks to standard mode

How to allow the user to enlarge text

[funkyapache]

Hi,

what css do I need to do to allow my users to use the browsers "text size" (largest,larger,medium,smaller,smallest). Does specifing em's rather than px help with this type of implementation?

I'm trying to convert a website that was built in quirks mode and used table based layout. My users use IE6,IE7 and a few firefox 3.5. Any tips would be greatly appreciated.

[limbo]

Em's is your best bet

One trick is to set your font size using the body selector to 62.5%. This renders 1.0em at almost exactly 10px. So 1.1em becomes 11px, 1.2em's becomes 12px etc, etc...

To replace font tags - sizing is a little different <font size="1"> is a approximately 10px or 0.65em. <font size="2"> is closer to 12px or 0.8em.

There are some good font size comparison charts try a search to see more conversions.

[funkyapache]

Thanks for the reply, this is the first time I've heard to to use 62.5% I thought I had to make it 75% why the difference?

Am I right in thinking that em's wouldn't render properly in IE if the page is in Quirks mode?

Would it be better to use em's over %? As I'm going through our existing css and most of the font sizes seem to use %

[tangor]

em is generally better cross-platform for all browsers. But this is not hard and fast, and often depends on the user's install and how they have their browser set up. Most of the time there's not problem, but it does remain a guessing game. :)

[rocknbil]

this is the first time I've heard to to use 62.5%

Put 62.5% and em together in a search, this is a technique that's been around for a while. :-) There's a few tutorials around about the how's and why's.