Web typography

The elements of style

Web typography has come a long way since the limited style of the early days. Typography defines the professionalism of a website and poorly chosen typography marks the website owner as an amateur, and often an amateur with bad taste. Good typography might not be consciously noted, but invites the reader with style and grace nonetheless.

The elements of typography encompass more than simple choice of font, although font choice is important. Other elements to consider are size, contrast, spacing, multiple font choices, and styling elements, all of which contribute to readability and professionalism.

Size

Choosing the size of your font is crucial to the success of your page. It sounds simple enough, but the trend in 2.0 web design is to small fonts. Small fonts may be trendy and attractive in a minimalist design (which is also trendy) but they are not user friendly. Since not every user will be wearing magnifying glasses, pick a size that’s readable - but not gigantic.

Contrast

Lower contrast text/background colors have become popular, but if there’s not enough contrast, reading the page can tire the eyes. Dark text on light background is easiest to read, but picking a dark gray or dark blue is an attractive alternative to black. Dark backgrounds with light lettering are also readable, but if you have lengthy content, stick with a light background to reduce eyestrain. If you’re not sure whether your contrast is adequate, open a screen shot in a graphics program and reduce the colors to grayscale. If it’s easily readable in grayscale, the contrast works.

Null space

Some pages are so crowded with content that the meaning is lost. Space your text into easy-to-digest blocks. White space on a page is not a bad thing. The eye needs space to adjust focus and white space between paragraphs or sections helps prevent eye fatigue and also makes your visitors more likely to keep reading. In addition, the rule of thumb for line spacing is 140% of text size. Use CSS line-height properties to achieve the right balance. The space inside the type – letter spacing – can be manipulated as well, to achieve an overall aesthetic balance of typeface and null space on the page.

Multiple font choices and styling elements

One of the most glaring amateur mistakes is use of multiple font choices, sizes and liberal use of styling elements like italics and underlines. For a professional page, you want to keep it simple. Use a single font for the body, and italicize, bold and underline sparingly. If you must use a different font somewhere on the page, make it in header titles. Separating sections with larger bolded text, even in different font, is perfectly acceptable.

The watchword is really restraint. Keep it simple, value the balance of null space, and put your artistic inclinations into pictures and interface design, not in the body of the content. Don’t treat your website like a flyer for a local high school perfomance of “Cats”. Treat it like what it is, an informational tool for your business and the first contact for potential customers.