Please enable javascript to view this page in its intended format.

Queen's University

Web Standards and Accessibility Guide

Font style and size

Standard: Font sizes will only be declared using relative measurement values.

Today's modern browsers allow their end users to specify screen text size (or font size) that is appropriate to their needs. By default, a browser's base size font is usually set at 16 pts, but this number can be changed by a number of methods. Developers must understand that each end user will change their font size to address their personal needs. At times, users need to grossly enlarge the text to the point of distorting a design layout. While this may cause frustration to those that seek a pleasing aesthetic, legibility must always trump design. The goal of a developer is to deliver both under normal circumstances.

For this reason, when specifying font sizes, developers must use relative settings. This is also why text-based navigation is preferred over button images and "graphic text" (text imbedded in a graphic image), as in these instances the text on the button or in the graphic cannot be enlarged or viewed at the user's default setting - it has already been pre-determined and fixed by the designer. There are a number of techniques, however, which can expand web-based typography, as well as a few tricks developers can employ when they are forced to use graphic text.

Finally, while the official W3C specification indicates that the pixel is a relative unit of measurement, pixels are specifically disallowed when declaring font and text sizings. Other fixed measurement units include pt (points), cm and mm (centimeter and millimeter). Relative sizing values include percentage (%), ems, and declaration such as small, smaller, xsmall, large, larger, etc. (similar to the now deprecated "font size= "+2"").

Standard: Font sizes will only be declared via a page's Cascading Style Sheet(s).

The need to separate content from design is the underlying foundation for accessibility, scalability, and future compatibility of all of your web content. For this reason, size declarations should be recorded in a site's style sheet, and not in the content page. Previously, sizing and font family declarations were coded into a web page using the now deprecated <font> element:

<font size="5" color="red" face="Arial">Larger Red Text</font>

Standard: For maximum legibility and cross-platform compatability, the default screen font for all Queen's web pages will be the sans-serif collection: "Lucida Grande", Arial, sans-serif.

Numerous studies have proven that sans-serif font faces reduce eyestrain at computer terminals and are more generally legible.

Kingston, Ontario, Canada. K7L 3N6. 613.533.2000