[thelist] font accessibility CSS

Simon Willison cs1spw at bath.ac.uk
Fri Oct 24 10:33:27 CDT 2003


Jono Young wrote:

> I just recently read that it is better to use percentages(%) for font sizes
> instead of pixels (px). I am not too sure how to determine what % matches
> which px size, as I an pretty new to the idea.  Maybe there's a chart online
> that shows % and px sizes?

Bizzarely, getting text size right is one of the hardest things to do 
with CSS. Each approach has its disadvantages - pixels disallow resizing 
in IE (which is a BIG problem), percentages can behave strangely, ems 
only work reliably if the default browser text size is consistent.

I've started using the Georgia font for most of my web work simply 
because it's the only common font that looks nice at default size! That 
way I can side-step font sizing entirely.

However, if you want to use a sans-serif font such as Verdana you really 
need to control the size somehow - the simple fact of the matter is that 
verdana, while neat at smaller sizes, is simply pig ugly once it gets 
too big (unless your monitor has some kind of anti-aliasing).

My favoured font sizing method is to use a font keyword (small, x-small 
etc) on the body tag and then use ems to size text throughout the rest 
of the document relative to the body size. Here's the code I use for 
sizing verdana to something that isn't ugly while remaining accessible:

body {
   font-family: verdana, sans-serif;
   font-size: x-small;
   voice-family: "\"}\"";
   voice-family: inherit;
   font-size: small;
}
html>body {
   font-size: small;
}

The above code uses the box model hack to compensate for the fact that 
IE 5 renders font-size: x-small the same size as better browsers render 
font-size: small; There's a further explanation of this technique in my 
blog entry here:

http://simon.incutio.com/archive/2003/05/20/defeatingIE5

Hope that helps,

-- 
Simon Willison
Web development weblog: http://simon.incutio.com/



More information about the thelist mailing list