web typography study guide

Choose the Right Typeface

Think less of styles, but more of readability when choosing a typeface for body copy, and pick a typeface that works well in small sizes. The best way to decide on one is to try out each typeface that might work, then compare and decide.

tip  There are some guiding principles and characteristics that can be considered while choosing a readable on-screen typeface:

  • Tall x-height, and average length of ascenders and descenders. [fig.1]
  • Slightly wider em width, and medium height-to-width ratio. [fig.2]
  • Small variations in stroke weight. [fig.3]
  • Avoid overlarge counters. [fig.4]
  • Choose a face with familiar letter forms. Avoid quirky typefaces that break convention.
  • Use lower case letters with capitals where appropriate.
  • Serifs for larger type, and sans-serif for smaller type.

CSS font specifications should always include a list of fonts that different browsers can use. This way, if the first font chosen is unavailable, the browser will move on to the second choice, and so on through the list.

    A Font Stack is a list of fonts in a CSS font-family declaration.

A font stack usually contains 4 to 6 fonts. Their order should be:

  1. Preferred font.
  2. Nearest alternative
  3. OS alternative
  4. The most common Mac or Windows fonts
  5. Generic font name (serif/sans-serif/cursive/monospace/fantasy) [fig.5]

With CSS Font Embedding, the web designer is no longer stuck with the standard web-safe font. Simply use the @font-face rule within the CSS stylesheet, name it using CSS's standard font-family property, give it a source URL (the location of the font file on the server), and refer to it just as any other font throughout the rest of the CSS.

One issue with font embedding is browser compatibility with the font format.