Relative Fonts
I have not posted in a while. I have been very busy getting my web site (www.learningaccessibility.com) to be accessible. I have done so and I feel good about that. One thing I noticed; not only are relative fonts easy to implement, but they do not behave as expected. If your user wants to use web pages with relative fonts, they should not change the absolute default font-size preferences for their browser. I did so for Safari. I saw strange results on Safari that did not match Firefox. I couldn’t imagine why the text on Safari was so large and why my page was so distorted. Visually impaired people use all the tools in their tool bag and the mix can be interesting. The result is that relative fonts do not mix well with altered absolute default browser preferences.
At first I was grumbling about relative fonts. I spent wasted time debugging the unwanted results. If you use relative fonts you should:
- Let your users know not to use multiple zoom methods that do not mix well.
- Make sure all of your fonts are relative. Don’t mix relative with absolute font-sizes on your web pages.
- Do not use font-sizes over 200%. This starts to distort the page.
- Use 85% to 100% for regular text font-sizes in order to avoid page distortion.
- Use the Web Development Tool on Firefox to find all of your font-size settings.
- Test your web pages on Firefox, IE and Safari to determine if you obtain the expected results.
- Test your web pages with browser text zoom up to 4:1 ratio. Your page should not be distorted within this range.
- Use relative div and table sizes as well. This will help when pages are manually resized with relative fonts.