Online, things are a bit more complicated as we don’t always have full control over the users system and installed fonts. A system of “font fallbacks” has to be foreseen.
- Distinctive fonts: Tahoma, if not available fall back to Arial
- Body font: Arial
Arial is the standard fallback font that is to be used throughout the website. Typography should be clear and readable at a glance.
For optimum legibility the minimum size is 12 pixels. For buttons, repetitive links (“more”, “view statement” …) a font-size of 11pixels may be used.
In order to increase clarity and legibility, the choice of character sizes has to be limited to the following:
- 24px, for page titles
- 16px, for paragraph titles
- 12px, as default font
- 11px, bold, for table headings
- 11px Grey for footer and foot notes
- 11px Pure Blue for hyperlinks
Resizing fonts has to be supported. Where this document makes reference to pixel values, they refer to minimal values. The style sheets should not use px definitions but a resizable unit (.em)
Modern browsers also support “full zooming” function which is a better way of ensuring optimal readability on large screens without sacrificing quality of the user experience.