Motive [Home].Guides.


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.

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

Setting HTML text size in 2005

The majority of the methods described below have been superceded. This content is maintained chiefly as a historical reference.

The currently accepted best practice is to set text size with Cascading Style Sheets (CSS), using a combination of percentage and em values. Heading elements should be used to structure content and not solely as a means of setting text size.

HTML heading elements (h1-h6)

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

<h1>Sample heading</h1>

Default typeface

The standard (default) typeface for browser text is Times New Roman.



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>



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>



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>



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>