Defining Font Size

[Girard Ibanez]

1) When defining font size (topography) what must one consider?

For example: when using the <h1>, <h2>, font-size: large; .... etc. do you select the size base on what it will look like (size) at the users default screen. In my case FF with a default of 16px / medium / 100% / 1em...

Given there are different screen ratios (browsers) that will output a font size that is not readable.

2) What size does a <h1>, <h2> small , xx-small, large ...etc equated to in percentage?

I am trying to establish proper semantics when coding html / css.


Thanks,

G.

[Veronica]

The ratio from h1 to h2, etc is really up to you. 1em (or 100%) is equivalent to setting the font size to the user's preference. So you might want to set h1 at 2em, h2 at 1.7em, h3 at 1.4 em, etc, depending on how many subheadings you use on your site. If a base font-size is set for your site and you use absolute size (xx-small, x-small etc), w3 suggests a scaling factor of 1.2, eg if the 'medium' font is 12pt, the 'large' font could be 14.4pt.

[mwinter]

1) When defining font size (topography) what must one consider?

Obviously, the most important thing is readability. Reducing the font size can easily make text unreadable, especially when using pixels as dimensions, or when getting to 80&#37; of the default font size.

In general, try to ensure that the majority of the text is at 100% or higher of the default. Only de-emphasised text, such as copyright information and other legalese, as well as navigation (perhaps) need be smaller. Also, steer clear of the worded font sizes.

2) What size does a <h1>, <h2> small , xx-small, large ...etc equated to in percentage?

There's no concrete values. The W3C suggests defaults, and browsers tend to have similar default style sheets, but they aren't always the same.

[boogyman]

2) What size does a <h1>, <h2> small , xx-small, large ...etc equated to in percentage?

percentages are dependant on the browser, and IE / Fx for instance render pixel's differently. When you are designing a site, em are recommended to be used for width (margin / padding) and pt is recommended to be used if you are going to explicitly declare font-size.
Also, if you decide to go to the "word" way, you also need to know that IE renders +1 size over Fx, so

body {
 font-size: small;
}

in Fx would not be rendered the same size IE. You need to do the "Box Model Hack" that will trick IE into rendering it how you meant the font to display.

Personally I explicitly declare a size in the body, then use percentages from there.

body - small (Fx . Standard Compliant)
      - x-small (IE)
h1 - 150%
h2 - 120%
h3 - 110%
h4 - 90%
h5 - 80%
h6 - 65%

and I use the same principles for my other declarations, thus if I ever wanted to change the default font size I just need to change the body, and I will not need to worry about the proportions from then on.

[mwinter]

percentages are dependant on the browser,

Percentages are dependent upon the default font size, not the browser.

and IE / Fx for instance render pixel's differently.

I've never observed that. In fact, I remember someone making such a claim so I took screen shots from both browsers and counted the number of pixels; they were the same. However, whilst 12px high text might look fine on one display, it will be a blurred mess on a higher resolution monitor with similar dimensions: there will be more pixels crammed into the same space.

When you are designing a site, ... pt is recommended to be used if you are going to explicitly declare font-size.

Points are a physical unit (defined in terms of inches) aimed at printing, not the screen. In fact, they are more or less useless with the latter as displays are rarely calibrated properly to convert from points to the correct number of pixels. Use percentages whenever targeting a style sheet at screen media!

Also, if you decide to go to the "word" way, you also need to know that IE renders +1 size over Fx

Which is precisely why one should avoid it.

[mburt]

I've never observed that. In fact, I remember someone making such a claim so I took screen shots from both browsers and counted the number of pixels; they were the same. However, whilst 12px high text might look fine on one display, it will be a blurred mess on a higher resolution monitor with similar dimensions: there will be more pixels crammed into the same space.

You're right, pixel sizes are the same. But the way IE calculates borders/margins/padding is different from Firefox. For instance, if you had a 100 x 100 box, with a 1px border and a 2px padding. IE might will add it to the width, but Firefox will create the padding inside the given dimensions.

[mwinter]

But the way IE calculates borders/margins/padding is different from Firefox.

The way IE used to apply the box model was different from that specified by the W3C, but that was fixed in IE6 when rendering in Standards mode. IE6 was released in late 2001.

[Girard Ibanez]

Thanks for the reply ... I believe I found the answer but if not correct me if I am wrong.

As mwinter always preach:

"HTML is about structure and semantics"

So the <h1> tag would be define as the most important part of the heading as it would be the darkest boldest font style giving mean to the page design (html).