berkleebassist

So I really love typography. I mean, seriously. I read I Love Typography, download free fonts all the time, keep looking for ways to use swfIR or sIFR in my websites, and otherwise utilize beautiful typefaces.

So when I came across this article by Jon Tan, I devoured it. It’s a study of the paragraph as punctuation, and how this punctuation is created via the use (or absence) of space, in– and outdenting, and versals (the name for the large capital letters at the beginning of a paragraph or series of paragraphs.) I’ve decided to examine his study and highlight some elements that I personally find attractive, and try to explain some reasons for this.

Tan opens his article with this statement, which is more eloquent than anything I could come up with (a utilizes a drop cap versal, which I’ve left in to demonstrate some paragraphical styling):

Paragraphs are punctuation, the punctuation of ideas. After selecting a typeface, choosing the right paragraph style is one of the cornerstones of good typography. This is a brief inquiry into paragraph style for the Web.

Tan goes on to list some examples here: 12 Examples of Paragraph Typography, but be aware, these are very rough examples, sharing typeface, size, copy, and line height (called leading).

It’s important to understand the defaults that we’re presented with in the web-ified world I’m primarily interested in. Browsers present us with a default block style of flush left, ragged right with a single line boundary. Obviously, through the magic of CSS, we can alter these defaults. As Tan writes:

In any project, the text itself will have its own tone, rhythm and meaning. It’s our job to provide it with a stage on which to sing. Typography serves the spirit of the text, bringing it before an audience, and then quietly fading into the background as the reader delves into the meaning.

Tan continues on, explaining that we as designers & coders create spaces that are not only set, like the traditional print press, but must also be able to fluidly accept content as it is poured into it (blogs like this one, for example, have their content change constantly).

Tan offers up some very tasty tidbits regarding the history of the paragraph, which I’ll omit, but definitely check it out in his article. He ends up moving on from there to discussing the technology behind the printed word, and the rise of white space due to the decrease in materials (the move to wood-based paper), finally ending up with the fact that with the rise of electronic print, we have zero cost of material, as the web “page” can be limitless or a mere single line; it’s all the same. He makes a great statement about this: “[u]sability is the only currency by which web typography is measured.” He reinforces the idea that content is king, and with that in mind, “[g]ood typography makes the canvass [sic] fit the meaning of the text, not the other way around. It paints pictures with form that enrich the meaning of the words with colour, texture and movement.”

Tan offers some specific examples of various excellent paragraph styles, and I’d like to add that I love Tan’s own paragraph and typographical styling on his site, Jon Tangerine.

His last comments regard the fact that skimming is the norm on the web, and that careful consideration of paragraph and, by extension, typographic styles, creates the optimal experience for your users.

(Via Jon Tan “The Paragraph in Web Typography & Design”)