Using Relative font-size for Accessibility

Although I prefer using ems and percentages, there are select web designers who insist on using pixels for their entire design. There are some advantages to this, such as a controlled layout and knowing that it will look the same in all browsers and computers. However, using pixels can cause accessibility problems for visual impaired. To counter this, we must use another form of font-size properties to allow all browsers to resize font; these font-size properties are called font-size keywords.

How to make font-size pixels resizable

p {
font-size: 12px;
}

/*/*/a{}
body p {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>body p {
font-size: small;
}
/* */


Everything between the /* */ is ignored by Netscape 4. a{} is ignored by Opera 5. Defines body p to be x-small in IE 5, small in others. The voice-family stuff makes IE 5 think body p is over, but no other browser does. html>body p is for Opera 5. All browsers except IE 5 will then set the font-size to small except IE 5 and Netscape 4, which doesn’t support relative font-size.

To make it easier for visitors to change font-size use a style switcher code to place icons on your site so they can easily increase font-size on their own without digging through browser settings.

If you enjoyed this post, please consider subscribing to my full feed RSS.

Related Articles:
How to Make Fonts Look the Same in All Browsers
2007: Year in Review
Absolute vs Relative Internal Linking
Windows XP Font Editor
New Widgets for Blogs

RSS feed

Comments »