how to unfix my fonts

need a quick lesson in ems

[annej]

I have my text set at 12px to 14px depending if it's in the side column or in an article.

I understand I need to convert to ems for usability and accessibility.

How do I convert? What is an em equal to in px? I understand it's like a percentage but percentage of what?

[BlobFisk]

Hi annej,

Have a look at this CSS Forum thread [webmasterworld.com] which should hopefully answer your question.

[annej]

Wow, reading that thread it looks mindboggeling.

If I set my article text at

font-family: Verdana;
font-size: 14px;

wouldn't it be big enough for most folks?

[encyclo]

The above linked article dates from 2002, and the browser lanndscape has changed a great deal since then. OK we still have to deal with IE6, but depending on your audience IE5.x is pretty much dead and 4.x browsers are no longer an issue.

I use two approaches, each with their merits. The first is to use font size keywords:

h1 {font-size:large;}
h2 {font-size:medium;}
p {font-size:small;}
#footer {font-size:x-small;}

Sizes run from xx-small to xx-large. There are two disadvantages to the keywords approach, the first is that you are limited to seven levels and the second is that IE5 (or IE6 in quirks mode) will make the fonts one size larger unless you use a box model hack. I don't bother these days as I have very few IE5 users and it is not a problem that the text is larger for them anyway.

The second approach is with percentages and ems:

body {font-size:100%;}
h1 {font-size:1.5em;}
h2 {font-size:1.1em;}
p {font-size:0.9em;}
#footer {font-size:0.7em;}

The disadvantage is that if you get to 0.5em or lower then IE tends to act a bit strangely.

Assuming your documents are always in standards-compliance mode (with a full doctype on the very first line) then font size without pixels works very well.

[annej]

Assuming your documents are always in standards-compliance mode (with a full doctype on the very first line) then font size without pixels works very well.

Oh, lordy. You are talking to someone who hand codes her HTML and CSS. I've always gone with the idea that if it works use it.

I just asked about doctypes on the HTML forum. Maybe I can sort it out. I've tried to validate my pages before but they always want a doctype. I don't think they had those back when I learned HTML.

I'll try your suggestions on a small subsection. I have a couple that are on their own stylesheet. Then it will be easier to see if it works.