Web typography

This guide provides specimen screens of typefaces commonly used in web design, showing each typeface at a range of text sizes and weights. The Motive Glossary also provides an introduction to web fonts.

Web typeface specimen screens

FontCheck: Sample characters: (Ee), are shown to the right of each typeface family name. If displayed as dingbats/symbols: (Ee), then the typeface is not installed on your computer (see: Downloading and installing web typefaces).

Web fonts

Serif	Sans-serif	Monospace	Display
Georgia (Ee)	Arial (Ee)	Andale Mono (Ee)	Comic Sans MS (Ee)
Times New Roman (Ee)	Arial Narrow (Ee)	Courier New (Ee)	Impact (Ee)
	Arial Black (Ee)
	Helvetica (Ee)
	Tahoma (Ee)
	Trebuchet MS (Ee)
	Verdana (Ee)

The typefaces listed in the table above are installed with Internet Explorer (IE) for both Windows (WIN) and Macintosh (Mac) operating systems.

Windows Vista system fonts

Serif	Sans-serif	Monospace	Display
Cambria (Ee)	Calibri (Ee)	Consolas (Ee)
Constantia (Ee)	Candara (Ee)
	Corbel (Ee)

The typefaces listed in the table above are installed as part of the Windows Vista operating system.

Generic font families

Fonts are commonly categorised with reference to letterform characteristics.

• serif: characterised by a variable stroke width and small decorative extensions at the end of letterforms (serifs); commonly used for printed documents; often less legible onscreen at smaller sizes (as serifs become ‘blocky’)
• sans-serif: typically an even-weighted stroke without (sans) serifs; often preferred for reading onscreen, particularly at smaller sizes
• monospace: a (typically sans-serif) typeface where all letterforms are the same width; originally created for manual typewriters and optical character recognition (OCR) devices; used in accounting (as figures align in columns), also used when programming or to denote computer code
• display: typefaces of an ornamental or decorative nature; best when used to set headline text or typographical accents (such as initial/drop capitals)

Choosing a web-safe typeface

For a typeface to be used on a webpage, as ‘live’ text, it must be installed on the user’s computer. When a typeface is installed on a significant proportion of computers used to access websites it can be considered ‘web-safe’.

System typefaces

A number of typefaces come installed with a computer’s operating system, these are often referred to as system fonts. For example, Lucida Grande is the typeface used in the Macinstosh OS X operating system to display interface labels, such as folder and window names. Web-safe typefaces are often also system fonts.

Program typefaces

Typefaces are also often installed with computer programs. For example, Adobe Acrobat (used to create PDF documents), ships with core typefaces that must be installed before the program can be used.

Downloading and installing typefaces

Microsoft has discontinued individual download of its TrueType core fonts for the web. Fortunately an enterprising Polish company maintains a copy of the original Microsoft TrueType core fonts for the web page.

Installation instructions are available from the Microsoft TrueType core fonts for the web FAQ.

Methods for setting HTML text size

HTML heading elements (h1-h6)

HTML heading elements affect the size of the text they enclose.

<h1>Sample heading</h1>

Benefits

• heading elements add structure to content, making it easier for users to scan content
• search engines may weight text enclosed in heading elements when determining search engine ranking

Limitations

• the default type size for headings varies between browser types, versions and platforms (this can be overcome by using CSS to redefine heading styles)

HTML <font> size attribute

The size attribute of the font element (<font></font>) can be used to set text size. Text size is specified in terms of whole numbers, from 1 (smallest) to 7 (biggest), for example:

<font size="2">text</font>

If a value is not set for the size attribute, text will display at size 3 (Mac) or size 4 (WIN).

The value of the size attribute can also be specified as calculated value in relation to the default text size. Assuming the default size is 3, size="+1" is the same as size="4".

<font size="+1'>text</font> <font size="-2">text</font>

Benefits

• text set using the size attribute can be resized using browser ‘Text Size’ controls
  • if all text sizes have been set using the size attribute, then content information hierarchies (e.g. the relative sizes of navigation, headings, body copy and captions) are maintained

Limitations

• font elements must be written into each webpage, making maintenance (adding or editing content) less efficient
• font elements have been ‘phased out’ (deprecated) by the World Wide Web Consortium (W3C), in favour of setting typeface size using CSS

CSS relative sizes

CSS relative sizes are the nearest equivalent to the font element size attribute.

<style type="text/css"> <!--
h1 { font-size: xx-large;} .footer { font-size: small;} --> </style>

The corresponding element or class is then used to markup content:

<h1>text</h1> <p class="footer">text</p>

Benefits

• setting text size using relative size keywords allows a user to increase the size of text using browser ‘Text Size’ settings
• as sizes are relative, all typographic elements scale proportionally, maintaining information hierarchies

Limitations

• relative size keywords are interpreted differently by different browsers, for example, medium in Internet Explorer under Windows may be a comfortable size for body copy while on a Mac appearing as though text has been set in a heading style

CSS pixel size

Using a CSS rule, type can be sized to a pixel (px) value.

<style type="text/css"> <!-- h1 { font-size: 18px;} .footer { font-size: 10px;} --> </style>

Benefits

• screen based letter forms are often developed using a pixel matrix, and may be designed for display at specific pixel sizes
• as a native display characteristic (i.e. as pixels are a property of the screen), pixel sizes tend to display more consistently across browsers

Limitations

• the legibility of text set to a pixel size differs between browsers, browser versions and platforms, to account for version 5+ browsers, the smallest type should be set at is 9px
• if text is set to a pixel value, it cannot be resized using ‘Text Size’ controls in a number of popular browsers, including Internet Explorer 6

CSS point size

Point sizes (pt) have been included in this overview as a tribute to print designers. As evident in the specimen sheets, when it comes to HTML, points are not equivalent to pixels.

<style type="text/css"> <!-- .footer { font-size: 10pt;} h1 { font-size: 18pt;} --> </style>

Benefits

• as points are a standard method of setting type size in print, text set using point values may be more legible in print (although this also relies upon browser printing preferences)

Limitations

• point sizes are not equivalent to the pixel matrix used by the screen, the resulting approximation may causes type forms to be less legible
• if text is set to a point value, it cannot be resized using ‘Text Size’ controls in a number of popular browsers, including Internet Explorer 6