View Full Version : Changing Font Size in Browser

12-12-2005, 06:27 PM

I want the user to be able to change the size of the font in their browser

eg.. IE --- View -- Text Size -- Largest, Larger etc

Do you use the em tag?

I am using a stylesheet so does this go within the stylesheet code?

Any help greatly appreciated.
Many Thanks


body {
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px 2em ;
line-height: 24px;
color: none;

12-12-2005, 06:36 PM
Yea you need to change those font sizes from pixels to either em's, pt's, or 'small', 'smaller', 'large' etc. It is recommended you use em's though.

As you can probably guess, a pixel is a fixed size, so IE doesn't change the font size when you change it in your browser if you use px's. Other browsers do though.

Bill Posters
12-12-2005, 06:41 PM
Firstly, it's em unit. There is an em tag (element) in markup, but that's something different.

If you wish your text to be resizable in all browsers (incl. IE/Win) via the browser controls, then steer clear of using px or pt units.
Fwiw, IE/Win is the only browser which fails to meet that part of the UA development guideline on resizable text. It's not yet clear whether IE7 will finally get that issue sorted and finally achieve something other browsers (incl. IE/Mac) have been capable of for years.
I certainly hope it does, as I'm personally fond of using px units for font sizes - you know where you are with pixels - and I'm tired of having accessibility devotees and other 'realists' (read: IE-apologists) frowning at authors like it's their fault that IE/Win users can't resize text because it's set in px units.

Anyhoooo… ;)

Incidentally, …

font-size: 12px 2em ;
That's nonsense.
The font-size property can accept only a single value.

12-12-2005, 07:18 PM
Oops yup, forgot pt is fixed in IE too.

Change that CSS part to this, and all should be fine -

body {
background: #FFF;
font: 1em/2em Verdana, Arial, Helvetica, sans-serif;

(I like shortening things :p).

I don't see why you set color to none so I left that out, and you'll have to play with the sizes to make them look as how they did before.

When you set all the propeties for font in one declaration the line height can be included as I did above (fontsize(1em)/lineheight(2em)).