Most of the guidance provided on this page is based on the work and standards created by the World Wide Web Consortium or W3C.
- Page Title
- Text and Typography
- Emphasis
- Color
- Contrast
- Headings
- Links
- Images
- Iframes
- Multimedia
- Tables
- PDF Files
- Automated Accessibility Checks
- References for additional information
...
In web circles, there is a lot of debate about which fonts are better than others, but one thing is clear. Fonts with cursive, unusual shapes, or artistic features may look pretty, but they are harder to read than standard fonts like Times New Roman or Arial. Avoid them.
Serif v. Sans-serif
Serif stands for a stroke or line, and typically these fonts have an embellishment at the top and/or bottom of the letters. Common Serif fonts include Times New Roman, Garamond, Baskerville, Georgia, and Courier New.
...
- This sentence uses Arial
- This sentence uses Verdana
Which of these two is better for the web is up for debate. These days, it is more common to see sans-serif fonts on the web than serif. One of the caveats when using sans-serif is that it is the possibility of confusion between upper-case I (as in Idaho) and lower-case L (as in linger). Usually, the context prevents this but if you are mixing letters and numbers it might be better to use a serif font.
Avoid fully justified text
The uneven spacing between words in fully justified text can cause "rivers of white space" to run down the page, making reading difficult and, in some cases, impossible. Full justification can also cause words to be bunched too closely together, or stretched in unnatural ways, making it difficult for some users to locate word boundaries.
Pay attention to text spacing to improve readability
Use the line-height, word-spacing, and letter-spacing style attributes to help your visitors read content more easily. W3C has specific guidelines on text-spacing:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
This is usually accomplished via Cascading Style Sheets (CSS). WCAG provides some techniques you can use to accomplish this.
Break up long passages of text
Split up long sections of text into separate paragraphs, or lists, or find other ways to make each section of text more manageable.
Color
Choosing a color theme can be challenging sometimes, especially when you realize that some of your visitors can not distinguish between some color combinations. This is color-blindness.
What follows are guidelines to keep in mind as you choose your color elements for your web pages.
- Red/green color blindness is the most common. There is also blue/yellow and complete color blindness.
- Avoid putting red or green text on black backgrounds, or black text on red or green backgrounds
References for additional information
...