In part one, 15 Excellent Examples of Web Typography, I showcased fifteen web sites that make excellent use of type. To avoid this article being inordinately long, I’m going to focus on the first site in the list, namely A List Apart. To take all 15 examples to pieces would be rather pointless, because most of what’s good about them is shared.

A List Apart

The job of web typography is not to simply mimic that of print. First, the web is a different medium with different strengths and weaknesses. Attempting to faithfully reproduce print typography is a rather pointless exercise. The printed page is rigid; we have no control over the size of the type and of the page; on-line the user has more power, more influence; she can resize the page (browser window), and even alter the default font size; add to the mix, different browsers with different rendering capabilities, differing resolutions and screen sizes, and we soon realize that the web page and the printed page make different demands.

However, despite these differences, the elements of good typography are shared across these two mediums. In a future article we’ll look at this topic in more detail; today however, we have something different on our hands, so, without further ado let’s take this list apart. Don your overalls, put on those latex gloves, and with that rather awful (List Apart) pun behind us, let me reintroduce you to A List Apart.

Home page view

Article page view Not only is this site a wonderful resource, with well written articles, but it has the feel of a magazine or an academic journal — both in its design and in its typography (it even has its own ISSN number!).

The first tick against this site sits beside “White Space”. Though the pages are quite full with information, even above the fold, they don’t feel crowded. (see also Mark Boulton’s Whitespace). The page benefits from a relatively even texture and light colour (in typography the color of a page refers to its density or blackness of the type as a whole).

Good typography is like bread; ready to be admired, appraised and dissected before it is consumed. — Robert Bringhurst

Everything feels like it’s in the right place. Type is used as a means of hierarchy, as a way to distinguish and differentiate elements on the page. The logotype sits in its most comfortable position, top-left; the main menus, sit along the top, and are distinguished from other elements by their size, weight and style.

Letterspacing

All caps often benefits from a little extra letterspacing, as in the above example. The above date is styled like so:

letter-spacing:0.33em; (equivalent to 3px)

The letter-spacing property is also used for titles and bylines. A word of caution: there is usually never a need to apply CSS letter-spacing to the lower-case; and never, never, never, ever use negative letterspacing. There is an excellent article on web letterspacing over at webtypography.net.

Letterspace all strings of capitals and small caps, and all long strings of digits…. In titles and headings, extra letterspacing is often desirable. — Robert Bringhurst

Grid

Often, even a poorly designed page with substandard type can be much improved by simply aligning the elements to a well-crafted grid. A grid, though invisible, brings order and rhythm to design and to the type.

Note how the black badge in the top-left is supported by the grid, and how the top of the A within the logotype levels with the division between date and the preamble text. These are small details, but consistent attention to small details makes for a good whole.

In a future article, we’ll take a look at sIFR (Scaleable Inman Flash Replacement), for styling headings in Flash; how to style drop caps that are cross-browser friendly, and much, much more.

This one has been longer than usual. The next article will be a little shorter and a whole lot sweeter, and will include the next TypeNuts cartoon, so stay tuned. I’ll also reveal the identity of Brian (I’ve received numerous emails about him).