Is There A Better Way To Style Paragraphs?

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?

« »

Download a free sample from my book, Design Fundamentals.

10 comments

  1. I was actually just thinking about this very topic the other day. I’ve played around with indenting vs spacing paragraphs on my own website (before it went live) and ultimately I decided on space.

    I do agree with what Ford says about spaced paragraphs breaking up the flow of reading. However, I’m not sure this really works for the web.

    Here’s why. Reading on a back-lit screen, vs a piece of paper, is a lot more stressful on the eyes. This is one of the reasons the Kindle is so popular – it’s a digital book on a screen that mimics paper. I don’t know the science behind it, but I do know reading on a computer screen is a lot harder than reading print.

    I think having paragraphs broken up on the web helps ease that discomfort. Again, I’m not sure why exactly, but that’s just my experience.

    I looked at the three designer pages in your post. I found it harder, and more intimidating, to read the indented paragraphs.

    • I think with e-ink your reading based on reflected light just like a book. That’s why you can read on a Kindle or Nook out in the sun, but have a harder time indoors at night with not too much light on.

      I felt the same way as you when I first looked at the indented paragraphs. I did not like them at all at first, but the more I see them the more they have grown on me. Did you add the bookmarklet? Give it a try and every so often check how a site looks indented as opposed to the space.

      The indents are growing on me, though I can’t say I’m 100% sold on them.

  2. I want to comment “about extra space breaks the flow of reading”. The problem is we don’t read on Internet in most cases we scan and having spaces between paragraphs helps the searching when we are in “scan” mode. I wrote about this few years ago http://www.vcarrer.com/2009/05/how-we-read-on-web-and-how-can-we.html Naturally having extra space brakes inside classical and e-books doesn’t makes sense in that case is true the flow of reading is broken.

    • Vlad I agree we scan online, though I’ve never agreed that we don’t read online. Maybe I’m just thinking of myself, but I do read similarly to how I read offline.

      I think people scan first both online and offline to decide if they want to commit to a full read. Offline you’ve likely purchases whatever you’re about to read so it’s easier to commit. Online it’s as likely there’s something else a click away so it takes more to get the reading commitment.

      I also think one reason people might read less online is because there’s less worth reading online. It’s sad, but also true that much of the information online is garbage. It’s not hard to see why people would make a quick scan and determine they don’t need to read.

      A book or magazine you’ve committed to on purchase.

      I would agree that the extra space aids scanning, but I think a good design in general, with headings and subheadings, images and captions can also be just as scannable.

      Again though I’m not entirely sold on indents, but I do think it’s worth taking a deeper look at them.

      • I agree. There no silver bullets and there are many factors to be considered like total text size, paragraph size, noise factor like ads, videos, photos, links and other distraction. Probably the best thing to do is to design every article like Jason Santa Maria does or journalist(writers) and web designers that are working together to produce great content. We have the resources but we need more awareness.

        • I wish I had the time and more importantly the skill to design every post like Jason Santa Maria.

          I was wondering about all the different factors and if they had any effect in how I feel when coming across indents.

          Sometimes I think the paragraphs look great and they aren’t hindering my scanning or reading. Other times I didn’t care for them at all and the text looked uninviting.

          I should probably collect a few examples on both sides and then compare the font-size, measure, leading, etc. and see if I notice any patterns.

  3. I would say that Nathan’s bookmarklet highlights just how much of the written content on the web is structured for short attention spans and quick content scanning. Combined with the cluttered nature and variable quality of presentation on text heavy sites, there seems to be quite a bit of unease to my eyes when reading with indents only.

    I’m primarily a print designer and regularly switch between indents, line breaks (full & half) and a number of other custom design solutions. The difference from my perspective is that I specifically set paragraphs, lines and words to sit exactly where I want them to achieve an optimal reading and understanding flow. Achieving this online is not so easy, so the full break may live on for a long time. I personally prefer adding line breaks when setting long paragraphs, just to introduce variation and a pause across pages of content that otherwise may intimidate some readers.

    As noted already, indents are problematical. I doubt there will be one solution, as some site and page designs simply will not accommodate them with ease. Vladimir’s response sums it up nicely – more consultation and effort from all involved to collaboratively produce better online delivery of visual and written content.

    • Having the bookmarklet installed does make you notice and think about paragraphs more.

      Interesting view, particularly given your print background. The dynamic nature of the web does throw a wrench into this. I think we have more control on the web that is often assumed, but definitely not as much as in print.

      I agree there won’t be one solution. After researching and writing this post I came away thinking there’s no one way or right way to set a paragraph. The more I’ve been looking at live examples the more I’ve found I’ve liked and disliked both indents and line spacing. I think a lot of it isn’t just the way the paragraph is styled, but how the entire page is designed.

      Some pages are such a cluttered mess that it probably doesn’t make a difference. And some pages are designed so well that either way the text is still easy to read.

  4. Achieving a print-like aesthetic seems to be a popular direction for web design right now. Are we, as users, craving a more tactile digestion of information ( flipping pages, underlining text)? A move towards typically print-style indentation seems likely.

    • Popular, though not necessarily best. I think there’s a lot we can and should take from the print tradition. There are many solid principles used in print design that still apply to the web.

      Where we need to think different is the medium itself. The web is different than print mainly in the dynamic nature of the canvas in which we work. We have to design for the medium.

Leave a Reply

Your email address will not be published. Required fields are marked *