Typographic style on the Web defines how we display text on websites, which includes font selections, size, display, leading, kerning and countless other variables. Follow these basic guidelines to avoid mishaps.
Font stacks list different font faces in order of preference. Usually, these are similar in display and are therefore referred to as font families. Font families include sans-serif, serif, monospace, cursive, and fantasy.
Because developers are limited to the fonts available on the audience's computers, one must provide multiple fonts and a font family. The first font is the ideal font, the final font is the family to which the font belongs.
Every font face displayed on your sites should have at least an ideal font and its family. So
Using too many fonts is much like using too many colors -- it results in digital cacography that is difficult to read or digest. Generally speaking, it is unwise to employ more than three font faces within a page layout. Two fonts, usually one for headlines and another for body type is usually sufficient, particularly in this course.
It is easy to align text with CSS, but that doesn't mean you should. By default text is aligned left, which is often ideal. Other options include right, center, and justify. Centered text results in ragged right and left edges, which hurts readability. Rarely use right, use center only for headers and justify may be used for body type.
The measure equals the number of characters in a line, which should never exceed 70 but should not fall below 40. The measure is regulated by the ratio governing the font size and the width of either a DIV or a paragraph. Yes, there is a means to calculate the correct ratio.
Typographer Bringhurst recommends multiplying the text size by thirty to find an ideal line width. So, if you're using a 14px font, your line width would be roughly 420px
(14 x 30 = 420). Your width may be set on the paragraph, div or both.
Avoid too much color on type. Avoid more than three fonts per page. While you may assign unique values to each instance of text on your pages, your audience will be better served by keeping it simple and readable.
Short, focused writing should be broken with subheaders. This makes your writing more scannable. Additionally, long, unbroken paragraphs should be absolutely avoided. Instead, use "chunks" -- short, easily digested paragraphs. One person defines a chunk as a single idea expressed in writing.
Text size should reflect prominence (or lack thereof): The most important idea or type is largest; least important is smallest. When applying sizes, use the scale as applied to CSS by Mark Boulton, which roughly goes like this (from small to large): 11px, 13px, 16px, 18px, 24px, 36px. You may also apply font sizes with percentage (%) or M's (em).
Beyond the methods explained above, other commonly used CSS methods of modifying fonts include the following.
Matthew Blake Department of Journalism CSU-Chico
mdblake@csuchico.edu (530) 898-3608