Fonts and Typography

Font Families

serif (ex: Georgia, Times New Roman, Book Antiqua)
sans-serif (ex: Arial, Helvetica, Verdana)
monospace (ex: Courier, Courier New, Lucidia Console)

Frequently Asked Questions about Fonts and Typography

- How popular are serif and sans-serif typefaces in body copy and headlines?
- Which fonts are used most frequently?
- What is the average font size?
- What is the average line height of body copy?
- What is the average ratio between line height and font size in body copy?
- What is the average ratio between line height and line length in body copy?
- What is the average amount of spacing between paragraphs?
- What is the average ratio of paragraph spacing to line height in body copy?
- How are links styled?
- How many characters per line are common in body copy?
- How often is font replacement (sIFR, etc.) used?

Usability Tips

Keep the number of fonts used at a minimum: Using a lot of fonts (more than 3 different fonts) makes a web site look unstructured and unprofessional

Use sans serif fonts instead of serif for content: Sans serif fonts are more suited for the screen than serif fonts which are better suited for headings and print

Ensure that proper text and text size is used: It is recommended that Arial Trebuchet and Georgia are at 10pts+, Times New Roman at 12pts+ whilst Comic Sans and Impact fonts are not used

Content must make use of mixed capitalization: Having all text in caps or small caps makes it difficult for the user to read and scan it. All caps text makes a web site look unprofessional and untrustworthy

Use standard fonts for web site fonts: Users are more familiar with standard fonts and can thus read them faster

Character spacing should not be minimized: Altering the character spacing to fit in more text, makes it more dense and difficult to scan

Limit the use of different colors for fonts: When text is over-designed, it affects its meaning. Additionally, users may mistake over-designed text for adverts. Thus it is recommended that 4 different colors or less are used to color text