Believe it or not, how you describe your CSS font size handling to the browser has a large effect on the end user. Today the most popular way of sizing fonts in CSS is through pixels, this is because designers have pixel perfect control over the look and feel of their content.
Sound the alarms! This is not a very effective technique! In the worlds most popular browser, users cannot resize the text! (This is fixed in IE7 by their "zoom") Still, we want to make the web usable right? So here is an approach thats effective.We are going to use two techniques, keywords and relative length units.
Keyword: larger smaller smallest
Relative units: em %(percentage)
Let's implement! The first bit of code you're going to want to add to your CSS is the following. I will explain with inline comments:
Code:
body {
font-size: x-small; /* This is for IE5/Win */
voice-family: ""}""; /* Only IE5 recognizes this and thinks the CSS ends */
voice-family: inherit;
font-size: small; /* For compliant browsers */
}
html>body {
font-size: small; /* For Opera */
}
So now in your CSS when you want to describe how large or small a font should be you use a percentage for example:
Code:
h1 {
font-size: 170%;
}
p .smalltext {
font-size: 65%;
}
Note: 100% is the default "small" size.
Now we have improved the usability of our website greatly, the fonts can all be resized perfectly across all browsers.
Credit goes to the book "Bullet Proof Web Design" which taught me this.