best way to set up resizable fonts

it's been mentioned elsewhere numerous times and here it is again: set the body using em's (.75em is good if you like a smaller font than normal) and then use percentages for the rest of the page. Works well for IE, N4 and N6. N4 seems to retain the body size for headings if a specific size hasn't been set on the headers.

An example of this:

body    {font-family: Arial, Helvetica, sans-serif; font-size:.75em;}
h1      {font-size:250%; }
h2      {font-size:200%; }
Published April 22, 2004 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/156

Conversation

2 Comments · RSS feed
1
Sandra said on November 03, 2004

Could you please tell me how to superscript the trademark "r" symbol in dreaweaver? Thank you very very much!

2
Andres Galante said on October 23, 2005

here is a way to use em, and actually get them.

/* Reset Fonts */
html {
font-size:125%;
}

/* hack for stupid ie */
* html body {
font-size:60%;
}

body {
font-size:50%; /* so 1em equals to 10px */
}

So, this way 1.2em =12px and so...

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.