Typography

Goals for our use of typography include:

Typography on the web

Compared to print, computer displays currently have a very low resolution:

The designer has no absolute control of type size, because people can easily change it...e.g. in Firefox hit ctrl-+ (on the numeric keypad) to increase font size..In IE try "View | Text zoom>"

Readings

On the Web

Upper- or lower-case

Our perception of words involves, initially, a perception of word shapes. Lower case type is easier to read than upper case, since there is much more variation of shape along the tops of words. See this excellent example on the Yale/AIM typography page.

Conversely, you may wish to use upper case selectively to slow down someone's reading.

Serif or sans-serif

Serifs are those variations in stroke thickness and decorations at the end of some strokeswhich are not present in "modern" sans-serif typefaces.

Print typographers claim that type with serifs is easier to read than type without serifs. The serifs offer extra "clues" to your eye about which letter is being shown.

But at small sizes, on a low-resolution computer screen, serifs may no longer be so distinguishable, and so the legibility difference between serif and sans-serif fonts is less.

Choice of fonts

You specify a font with a style rule like this:

font-family: Papyrus, Georgia, Times New Roman, serif;

You specify several because visitors to your site will only see text set in a font installed on their computer. The 10 core fonts are the most commonly available.

Graphics(instead of CSS) can be used in a limited way for more control, but have their own disadvantages.

(Hopefully we'll have the ability to install and use web fonts before long.)

Fonts for the web (low resolution)

Microsoft employed designer Matthew Carter to come up with Verdana and Georgia specifically for increased legibility on computer screens. Arial is shown for comparison. Verdana has a greater relative x-height and the bold font looks bold

Text set in 10px Verdana, Verdana bold. Can you tell 1, l, I apart?
Text set in 10px Arial, Arial bold. Can you tell 1, l, I apart?
Text set in 10px 'sans-serif', sans-serif bold. Can you tell 1, l, I apart?
Text set in 10px Georgia, Georgia bold. Can you tell 1, l, I apart?
Text set in 10px New Times Roman, New Times Roman bold. Can you tell 1, l, I apart?
Text set in 10px 'serif', serif bold. Can you tell 1, l, I apart?

Measurements

Typographer's units of measurement include....

The 'measure'

...is the width of a column of text

measuring the measure

Recommendations are to keep this in a range of about 45-75 characters (with spaces), which we might do like this...
#content { width: 30em; }

Typographic lingo translated to CSS

See Typographic: Legibility and spacing for definitions of these terms:

Tracking / letterspacing: letter-spacing -- Use more of it with all capital letters to increase legibility

Leading: line-height -- As you increase the number of characters per line (the 'measure'), you can increase leading for better legibility.

Example: A List Apart, NYTimes article.

Emphasis on the Web

People tend to scan web pages rather than reading them word-for-word, so you should feel free to use typographic emphasis more freely than you would in print.

With rare exceptions (if any) do not underline text for emphasis, since on the web underlining usually communicates at some level "I'm a link".

But eventually, too much emphasis = no emphasis (or the "boy who cried wolf" syndrome). If your whole resume is in a bold typeface, nothing will stand out. Similarly, avoid large swaths of capitalized text or colored text. Overuse of emphasis is called shouting by Yale/AIM and others. Make link texts concise. In general, use typography to emphasize key ideas...only.

Canada, also finding that text warnings on cigarette packages were going unheeded has tried warnings containing graphic pictures.

Italics

italics figureThe pixels on computer screens are laid out on a rectangular grid running vertically and horizontally. If you look closely you'll find that HTML text is not anti-aliased (unlike text that you put in an image with Photoshop). Therefore italics, which involve strokes running off at arbitrary angles, are fairly jagged. So, italics are less readable, and less suited (particularly smaller fonts) for extended passages compared to print media. For text on the web, in general, you should use bold instead of italics to emphasize text.

Font restraint

Two (or perhaps 3) different font families is about right for most documents. See Chuck Green's typepalettes for some choices made by a professional designer.

With the earlier consideration that serifed characters are somewhat easier to read than sans-serif, a very common web solution is to set headlines in a sans-serif font, and body text in a font with serifs.

Kieffer Ceramics uses graphics to be able to use a distinctive (serif) font at the top of the page, and uses sans-serif in the body.

Color restraint

Just as with font families, think about how you are using color, though it's a bit harder to put down a maximum number.


The author of this essay on designing with color for the visually impaired points out that blues/purples/reds on a light or white background produce the highest contrast. Also, different cultures perceive colors differently.

As with all web design be consistent.

Establish patterns and then break them only for a reason

Other web considerations