Accessibility Tips For Fonts

Fonts is a though subject when we are talking about accessibility. Many of the webdesigners out there design and code their website in a way they like it. They use a header image they like and they use the font family and font size they like. Sometimes (if not often?), they forget all machines and browsers are different and do not have the same settings.

This means the content of the website is not displayed to the visitors as the designer wanted. But how are we webdesigners supposed to use typography, if we don’t know how the text is displayed on other computers and browsers?

The tips I will give you in this article will improve your design. It’ll give you more control power over your content and typography. Ready?

1. Use universal fonts

Windows is not the same as a Mac machine and Windows ‘95 differs from Windows XP. They don’t have the same fonts installed by default. Fortunately, a couple fonts are installed on all those machines and we call them universal fonts. For example, fonts as Arial, Times New Roman and Courier New are included in the most systems around the world. It is safe and recommended to use these.

If you designed your content and you used different fonts and sizes on your website, we call it typography. But you shouldn’t experiment with fonts that you have downloaded from the internet because the visitors usually don’t have this font installed and therefore, they will only see the default font. If you are defining a downloaded font via CSS, you’d always add a couple standard fonts as a back-up. An example below:

body { font: Times New Roman, Verdana, Arial, Helvetica, sans-serif; }

2. Font sizes

Font families belong to typography. The same goes with their sizes: large headings, smaller paragraphs, and bolded links, to name a few. Unfortunately, most webdesigners don’t know how to use font sizes in proper way, and as a result, some visitors will get an accessibility problem. Learn on below.

According to Alistapart’s investigation and testing, it isn’t safe to use pixels to define your font size. Points aren’t safe either. What about Percents? Or Ems? Ems are recommended by the W3C. And yes, Alistapart tells you the exact same thing, with a little extra tip to smooth things up. Look below:

body {   font-size: 100%; }
p {      font-size:0.75em; }

The style declarations I’ve shown above will do the job. The only thing you should add is the font-size:100%; to your body property and now you can use Ems to define your font size. With this codes, everything is perfectly readable and resizable in most (modern) browsers like IE6+ , Firefox and Opera.

3. Use a correct line height

A paragraph text should be easy to read. This can be achieved with solid, accessible font families and font sizes. A part most webdesigners often forget is the area between the lines (“Line-height“, as it is called in CSS). A paragraph is much easier to read when a proper line-height is defined.

Recently, Eric Meyer did some investigation regarding the behavior of line-height in CSS. He tried different fonts and he came to the conclusion a “normal” line-height doesn’t exists. It changes per font. We can define line-height in the same way as we styled our font-sizes a couple minutes back.

body {      font-size: 100%;
            line-height:1.5em; }
p {         font-size:0.75em; }

Again, the text is now fully resizable and accessible. Your paragraph is displayed correctly in most (modern) browsers.

4. Website based font-size resizer

With the latest JavaScript libraries around the web, it is possible to improve your website by adding a font-size resizer. It will make your website more accessible, as a lot of people didn’t look for resizer options in their browser. A resizer on your website makes things easier.

Even when people know their browser has a resize option, this website based resizer has its advantages. As developers, we could specify the area to resize. For example, the text of your article should get resized, without messing up the layout. My resizer does the same job, so it is possible!

The web offers many ways to build a resizer. Here is the one I use myself. It works correctly.

5. Checking your website.

If you are in your office or at school, check your own website on the available computers. Most of the time, you only see your website from your own, development computer and most likely, you have changed some settings. Your website might look good on your computer, but maybe not on another one.

You are not your only visitor (I hope!), and people are visiting your website from all over the world. Check your website statistics and see with which browsers users are visiting. If 30% uses Firefox 2.0, be sure you browse your site in Firefox 2.0. Do the same thing with the other browsers.

It is always good to test your website. You become a visitor of your website yourself and you see what others are noticing. This knowledge can only help you improve your website.

Conclusion

Accessibility is important and you have all the information you need about accessibility and fonts. These are the tips I think, are the most valuable, but if you think an important one is missing, please contact me. This will only make this article more up-to-date and helpful.

If you think this article was useful, consider subscribing to my RSS feed to get the latest articles as soon as they will be available.

Thanks for reading and if you have a question, please do contact me. Comments, emails or IM messages are appreciated. As always.