Monday 16 January 2012

Is There A Better Way To Style Paragraphs? | Van SEO Design

Is There A Better Way To Style Paragraphs? | Van SEO Design


Is There A Better Way To Style Paragraphs?

Posted: 16 Jan 2012 05:30 AM PST

What’s the best way to indicate a new paragraph has started? Should you add an extra line space as is most common on the web or is it better to indent the first line as is common in print? Are these our only options?

Detail from the Gutenberg bibe showing the illumination added after printing.

Two things have me thinking about paragraphs. First is an observation that using indents has become more common with designers I follow and admire. Second is a post by Nathan Ford, Islands of Thought in Macrotypography, in which he rails against the extra line space as the wrong way to indicate new paragraphs.

In his words:

These spaces effectively chop the text into what I call “islands of thought” — disconnected paragraphs floating downstream, with only their left-right boundaries holding them together.

Nathan’s point is the extra space breaks the flow of reading. His post is a great read and I’d encourage you to take a look if you haven’t already seen it.

He provides a bookmarklet at the bottom of the post to let you see how any site would look with indents instead of spaces and I’ve been playing around with it all week.

Here are a few designer’s who know more than I do that are currently using indents to mark paragraphs.

Take a look and see what you think and also give Nathan’s bookmarklet a try.

Gutenberg bible

History of the Paragraph

Indenting the first line of a paragraph is the most common way to show a paragraph in print. It wasn’t always that way. A variety of cues have been used to mark new paragraphs.

Nathan’s post links to a post by Jon Tan, The Paragraph in Web Typography & Design, which provides some history and it’s another I’d encourage you to read.

Jon also created a page with examples of paragraph typography.

For a long time in history, paragraphs weren’t there at all. Text displayed in one long block. Later, special charters like the pilcrow ( ¶ ) were added inline to mark a new paragraph. Whitespace was then introduced, first replacing the special characters inline, and then as the familiar indent.

Eventually the use of the line space boundary became more common and today it’s the standard on the web.

Jon speculates that the reason the line space is less preferred in print might have to do with cost. More space means more materials are needed. Online the cost of materials isn’t a factor. We should be more concerned with usability.

my-books.jpg

Advice from My Bookshelf

I have quite a few books about typography sitting on my shelves and it seemed like a good idea to consult some of the masters.

My first stop was Robert Bringhurst and The Elements of Typographic Style. He mentions several ways to indicate a paragraph, but only mentions a line space following a block of quoted text. I kept looking.

A half dozen or so books later I mainly found typographers recommending an indent as the primary means to show the start of a new paragraph, however they do mention several other ways, including the use of a line-space as a boundary.

In her book Thinking with Type, Ellen Lupton tells us paragraphs don’t exist in nature, unlike sentences which are a part of spoken grammar. Paragraphs are purely a literary device and numerous alternatives can be used to indicate them, including some extra space. She does recommend using ½ line space instead of a full space.

Here’s are the alternatives she mentions

  • indent with line break
  • outdent with line break
  • line break only
  • line break and ½ line of space between
  • extra space inside line, without line break
  • symbol inside line, without line break or extra space

She even suggests that inventing news ways to mark a paragraph is an intriguing typographic exercise. In other words no one way is etched in stone.

Most of the ways I saw suggested to mark paragraphs were plays on the above. There was also the use of a drop line, in which the first line of the new paragraph is indented up to the end of the last line of the previous paragraph.

Additionally there were mentions of how to treat specific paragraphs.

  • versals such as elevated caps, drop caps, or outdented caps in first paragraph
  • running indent (both left and right margins) usually reserved for quotes
  • on a point indent as you’d find in bulleted lists
  • outdented block on the whole first paragraph
  • nested indents to show typographic hierarchy

Still the most mentioned and preferred way to indicate paragraphs was the use of an indent on the first line of all paragraphs other than the first or those that follow things like blockquotes and lists.

Ideally this indent should be related to the type size and/or leading or it could be based on some unit of the typographic grid. 1–2 ‘em’s was the most common recommendation

Timothy Samara cautioned that an indent works best with fully justified text. The amount of indent is subjective, but needs to be noticeable.

However he suggests that indents don’t work as well with ragged right text as the rag already varies the line length reducing the visual power of the indent.

What I came away with was there is no absolute rule to indicate a new paragraph though clearly print tradition advises the simple indent as the most common and perhaps most useful way.

spider-web.jpg

Is the Web Different?

Most, if not all, of the books I looked through were focused on print. Does moving type to the web change things?

The common way to show paragraphs on the web is the line space boundary. Perhaps it has something to do with the cost issue, though more likely it’s due to the space being the default of all browsers.

In print the thought is that people read linearly and sequentially so it makes sense for one paragraph to flow smoothly from one line to the next, whereas online reading might not be so linear as people navigate through in-content and navigational links.

We’ve all heard for years that people on the web don’t read, but rather scan. I think the truth is more that people scan first to decide whether to read or not, but once they’ve decided to read they do read just like they do with printed text.

Does an extra space making scanning easier? I don’t know. In some ways I can see that they would. I also see Nathan’s point that they only force an unnecessry pause on the reader.

Having played with Nathan’s bookmarklet all week, the indents are growing on me. I’ve also come across pages where I don’t like how they look. I suspect that has to do with how well size, leading, and measure were used, but I haven’t checked on those details enough to say for certain.

What I will be doing is paying a lot more attention to paragraphs and experimenting. I have a feeling indents will grow on me the more I see them and any resistance I feel is more to do with being used to seeing line spaces than anything else.

Detail from Harley MS 4425, Roman de la Rose

Summary

I think it’s a good idea for all of us to take a deeper look at how we might style and indicate new paragraphs.

In print there’s a preference for using a 1–2 em indent with exceptions for first paragraph after headings and subheadings and those that follow things like blockquotes and lists when a line space boundary is already present.

While the web has generally not used indents and favored line space boundaries, there is movement to change this and bring us all back to indents. I can’t say I’m fully sold yet, but I don’t think it’ll take much more selling to get me there.

There are a variety of other ways that can be used to mark paragraphs and even suggestions that creating an entirely new way would make for a good exercise. The one certainty is there’s no absolute right way show the start of a paragraph. There are preferences and guidelines, but no absolute rules.

What do you use? Do you have a preference or feel there is a right and wrong way to mark new paragraphs? Have you given it much thought before now and will you give it more though after reading this post?