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.
To collect my thoughts I put together a rough page of examples. I was interested in openings and texture more than font style, so they all share the same basic copy, typeface, size, and leading (line height). It was mostly for my own reference and will change over time, but you’re welcome to take a peek:
Typographers use layout techniques like single line boundaries, indents, outdents and versals (drop caps etc.) to punctuate paragraphs in a stream of discourse. Block paragraphs are common to the Web, indented paragraphs are common to print. Browser vendors gave us a default block style of flush left, ragged right with a single line boundary, but there are many variants we can pick from depending on the context.
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. As Ellen Lupton says in Thinking with Type:
Typography is a tool for doing things with: shaping content, giving language a physical body, enabling the social flow of messages.
In the Web era, designers create narrative spaces made up of text, images, video, etc. We add context and legibility to those formats. We also create spaces where people express themselves. We work with enacted narratives where the content is already available, and emergent narratives to be created over time. Instead of just styling symbols, we’re styling bytes in fluid narrative spaces. We’re bytographers; literally, the writers of bytes, not just glyphs. Yet still, at the heart of this explosion in publishing, is the humble and beautiful paragraph.
From paragraphos to paragraph
A paragraph was historically a punctuation mark. According to the Online Etymology Dictionary, the word paragraph has roots in the old French word paragrafe from modern Latin paragraphus or “sign for start of a new section of discourse”. That in turn is based on the Ancient Greek word paragraphos, a “short stroke in the margin marking a break in sense". The great reference of the 20th century, the Encyclopædia Britannica says:
In the oldest Greek literary texts, written on papyrus during the 4th century BC, a horizontal line called the paragraphos was placed under the beginning of a line in which a new topic was introduced. This is the only form of punctuation mentioned by Aristotle.
This fragment of a parchment scroll shows a paragraphos (a) indicating the line where the new paragraph starts with a break in the text (b).
Medieval punctuation employed a paragraphus—also known as a “‘gallows-pole’ or upper-case gamma, or § (later ¶)”— to separate ideas in a running discourse.
White space did not punctuate paragraphs until the 17th century. This was the era of Ben Jonson’s English Grammar, where he recommended the use of syntactic punctuation. Around that time, the practise of indenting the first line of a paragraph became part of our standard syntax, along with the use of capital letters for the start of a sentence, and the use of a space between words.
Technology & cost influencing style
Materials and technology have always influenced calligraphy and typography. Papyrus was used from the 4th century BC. It was brittle, so papyrus was rolled instead of folded. Parchment codices became more popular in the 5th century AD. The finest parchment was vellum, made from the white skin of a calf. Next came paper: Invented in China in the 1st century, the first latin text was written on paper around the 10th century. By the mid-15th century it was becoming dominant. Johannes Gutenberg printed only 45 copies of his Forty-two line Bible on vellum, using paper for the remaining 135 copies because it was cheaper.
During the industrial revolution in the 19th century, cheaper wood-based paper emerged along with steam-driven paper making machines. Intuition tells me that also influenced typography. By the turn of the 20th century paper was cheaper than ever before. The cost of inserting a single line of white space between paragraphs—the most common style today—would have reduced. The emergence of the consumer society and rise of advertising also encouraged a change in typographic style. “Fat face” display type was created for bills and advertisements; hyperbole became a style of visual layout. Before the 19th century, the insertion of a full line of white space between paragraphs would have surely been decadent. Perhaps that’s how it became commonplace. However, this is speculation; I cannot find reference to how it became prevalent, so would welcome further evidence.
The single line boundary is the most common paragraph delimiter used on the Web today and the most common browser default style. Generally, the indent is still the most prevalent paragraph delimiter in printed books and publications. In some ways, the block and indent styles exemplify the divide between Web and print. Printing cost is still a consideration looking at some of the mistreated text in certain paperback books, but printing on a screen effectively removes cost as a factor. Usability is the only currency by which web typography is measured. That’s what we’ll explore next.
Paragraphs in a narrative space
The narrative space of a web site is where a story develops as a person navigates the site. This should not be confused with narrative as a text-type. However, in some cases, it does share some characteristics like a chronological order. For example, a blog is a narrative, no matter how broken. It has a chronological order (albeit reverse). Even though a blog has multiple entry points, it can still contain a chronological story. The chapters in that story (entries) may be any one or more of the traditional text-types {narrative; descriptive; argumentative; expository;} but they all form the narrative space of the site.
The narrative space within a web site is made up of three components: content, layout (style and context), and information architecture.
Web design narrative can be compared to architectural narrative: The design of an environmental experience from multiple viewpoints in time and space. Visitors experience a web site in much the same way.
Web design narrative can also be compared to narrative in game design: both create the narrative space via a screen.
In both comparisons, the experience of the narrative space is more than just style and technology. In fact, style and technology are tools to create the user experience. The experience of moving through a narrative space on the web is complex. We understand that people may arrive in that space from any direction and context (referrer). They may be confronted when they arrive with any number of artifacts that convey narrative information (navigation, main content, calls to action, etc.). Any paragraph style must consider context as well as the meaning of the text.
Thinking about paragraph style
The way we approach the design of a narrative space on the Web is manifold. In most cases the content is not already available. If it is available, it may be subject to revision as part of a redesign process. The vision of the brand and the purpose of the site can seem clear, but may not be upon further investigation. Sometimes, our job as designers is to help refine both the vision and content. It’s during that stage that we explore layout and get a clue to the context in which the typography will live. We call it experience design. Only after that do we get down to experimenting with style.
The context, meaning and tone of web copy should always determine typographic style. Reading the text in full—or at least understanding what the text might be before styling it—is a pre-requisite. A common mistake is to allow the design to dominate the text: Design for design’s sake, or even worse, fashion’s sake. The text is made subservient to the canvas that the designer wished to paint on the screen. This is exemplified by the proliferation of fun, but ultimately harmful, web design galleries. Once a user muscles past the gag reflex, or stops admiring the amazing graphical decoration, they can often realise the design is in their way. The content is obscured. The narrative space becomes broken into fragments, like pieces of torn parchment linked tenuously together by calls to action, or a nested index of links called a menu.
Good typography makes the canvass 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. It is illusive, subtle, and ambient. It’s the shirt that engages from a distance. The closer you get to it the better it seems, but it takes a moment of reflection to even realise why. Robert Bringhurst says it beautifully in Elements of Typographic Style:
One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page. It takes various forms and goes by various names, including serenity, liveliness, laughter, grace and joy.
When trying to energise paragraph text, meaning and context are the most important factors to consider. Meaning flows from the author. They are trying to share a message, a thought, an idea. Context belongs to the audience. They are trying to understand, extract meaning and find relevance. They’re doing so in the context of their own requirements, but also in the context of the page layout and the wider architecture of the site. A refined sense of empathy will help you find the right form for your paragraphs, if user testing cannot be part of your process.
Choosing a paragraph style
There are no hard and fast rules for paragraph style for the Web. Choosing a style depends on all the factors we’ve previously discussed. The 12 example styles I threw together are just a starting point and all paragraph styles need testing in context.
All browsers have good support for basic paragraph styles. However, complex treatments of versals and openings can be problematic. There are still browsers with immature standards support when it comes to using techniques like pseudo elements and adjacent sibling selectors. Our ability to specify fonts for body copy is also limited, and inconsistent rendering across platform and browser persistently frustrates creativity and precision. There’s still a lot to work with, though. Here are a few examples, some new and some that are aging beautifully:
-
Rob Weychert used indents to wonderful effect in his Across America diary with text set flush left and ragged right. He also uses a deft combination of indents and small-capped openings in his blog posts. Both are a pristine example of using indents to compliment his particular style of writing. Truly a great example of bringing a love of print to the Web.
-
Ed Finkler mixes a font stack of Palatino and Palatino Linotype with boundaries that perfectly suit his content. He publishes a mixture of material that’s often technical, so boundaries help delineate the technical writing for skim reading, while the larger size and typeface adds great texture to his site. For the technical material I might have defined sub-heads a little more, but his choice of paragraph style is instinctively good.
-
Andy Rutledge treats paragraphs with love. On his home page, extracts from the three latest posts descend in a beautiful hierarchy of size and tone to indicate the chronology. Individual posts also cascade gracefully. Boundried blocks define his thoughts with great clarity. His material is often instructive, so this style perfectly suits the content.
-
Cameron Moll indents paragraphs and uses boundaries. This could offend pedants in print but I find it wonderfully pleasing on the Web. His material is often educational so the division of points by boundaries helps legibility. However, one of the main reasons this style works so well is the font size: it could seem small but the indent with a boundary allows the text to breathe and adds great poise and texture.
A note on indents
If you choose to use an indent, stylistic tradition suggests that there should be no indent on a paragraph that follows a head or sub head. Tradition also suggests there should be no indent following elements like lists and blockquotes. You can achieve this without extraneous markup using adjacent sibling selectors. For example, if you have already set an indent on your paragraphs:
p { text-indent: 2.5em; }
Then, to stop any paragraphs following a heading of rank 1–3 having an indent you can set:
h1 + p, h2 + p, h3 + p { text-indent: 0; }
However, I would caveat that with only if the blockquotes and indents are set flush left with hanging punctuation. Robert Bringhurst suggests: “If your paragraph indent is modest, you may for consistency’s sake want to use the same indent for quotations.” I agree, and I think the same can apply to lists on the Web. In both cases, a boundary is required to separate the list or blockquote from the surrounding paragraphs.
A note on blocks
If you choose a block style with no indent, but with boundaries between paragraphs, tradition suggests that there should be no indent on either lists or blockquotes. As you may have noticed from reading this article, I don’t always agree, especially on the Web. It depends on the content and the balance of elements. In certain instances, lists and blockquotes might be used to punctuate the running text, which can help people skim read on the Web.
Web != print
People experience the Web differently to print. The Web is not linear; in print people most often read sequentially, from front to back. They may flip, looking for something that catches their eye. After an initial look, they may skip back to interesting items using a table of contents or an index. On the Web this is reversed. Skipping to a certain page via the menu is habitual. This has been encouraged by bad design and web copy writing where inline links in the running text are sparse, if available at all.
Skim reading is the norm on the Web. It may well even be the case that skimming is normal everywhere, it’s only when we become absorbed that we digest the meaning of the text linearly. It’s a way of filtering the noise in a page to try and get to the content of interest. However, this has become essential because of bad design; pages have been confused with intrusive advertisements, overbearing calls to action, and layouts that don’t serve legibility. It has forced people to skim, whether they want to or not. Better designers refuse such harmful techniques. Getting layout and content right in prototyping is essential.
Careful choice of paragraph style (and other body text forms) can accommodate all of the differences in audience behavior and expectations. The optimal paragraph style you choose in summary pages may not be the optimal one for dense, detailed pages. A subtle change may well be necessary in different sections of a site. Choose judiciously, but most of all, designers should know why they are choosing a particular form; “because it looks good” is not a good reason on its own; “because it feels good” may well be.
