More Thoughts About Paragraph Styling

Posted: 06 Feb 2012 05:30 AM PST

A couple of weeks ago I asked if there was a better way to style paragraphs and mostly considered whether or not paragraphs should be indicated with an extra line space or an indent. This post is a follow up to some of the comments on that one.

Comments on the earlier post showed a preference for the extra line space. I had mixed feelings. I’ve liked the indents on some sites I’ve looked at and not at all on others and promised to look deeper into the reasons for both.

After looking through several sites and noting how each treated different aspects of typography I think I understand better when I like and don’t like indents.

I set up a simple demo to let you play around with these aspects. It’s not too hard to figure out how to use it, but it might make more sense to read through this post first.

How I Looked

My thinking was that my preference, and perhaps yours, had as much to do with other aspects of how the type is set as whether or not an indent or line space was used. I still suspect a certain amount of the preference is simply that we’re used to the line space online, but I wanted to see if there was consistency in when I found indents a good fit, and equally, a bad fit.

I started by visiting the 3 sites I linked to in the previous post from 3 designers who’s work I admire. I hadn’t listed them specifically because I liked how they used indents, but simply because they were using them.

On revisiting the pages I noticed right away that I liked one, wasn’t crazy about another, and was in the middle on the third.

Here are the sites again in order of how I liked the indents, Naturally this is a completely subjective judgement and you may or may not agree with me.

Jessica Hische — liked
Mark Boulton — ok
Jason Santa Maria — not crazy about

I spent a few minutes on each page and used WebKit Inspector to record a few things.

What typeface was used?
What font-size was used?
What line-height was set?
How much indent was used?
What was the length of the measure?

I also observed how big or small the text blocks generally were.

One point I should make is that I didn’t try to determine if any of the pages were easier to read than the others. That’s really the most important thing, but I couldn’t think of a good way to make a meaningful measurement of that judgement.

Mainly I was considering how each looked visually. Think of it as which text seemed more inviting to read.

What I Found

When I looked at the aspects above and noted the settings of each there was definitely some consistency that matched my preferences, both good and bad. I’ve taken my preferred settings to other sites and experimented with them and so far they’ve always held up as a predictor of whether or not I’ll like how the indents look.

Here’s what I’ve found to work for me. The numbers are an approximation.

line-height > = 1.6em
indents > = 2.0em
larger text blocks — subjective. I didn’t specifically count the lines in each.
less links and other markup in text — this was also subjective and i’m not sure it holds completely

The typeface used or the size of the font didn’t make much difference. The main thing was that larger line-heights and larger indents (both to a point) made indents more inviting to me.

With the text blocks when they were more consistently larger and regular in size and shape I thought the indents looked better. When lists and shorter paragraphs that employed additional spacing were mixed in a lot I didn’t care as much for the indents.

However I did like when subheadings were used well, standing out and providing ample space between sections.

The measure of the text didn’t seem to be a big factor, unless it turned what might have been a longer block of text into a shorter one or two sentence block. As long as the measure worked in general it seemed to work with either indents of extra spacing equally.

For fun I did some simple math on each of the 3 sites above. I divided the measure (px) by the font-size (px), though again as long as the measure works for spaces I think it works for indents too.

Jessica — 660 ÷ 13 = 50.769
Mark — 682 &divide 18 = 26.778
Jason — 440 &divide 18 = 24.444

Once I’d observed the above I started playing a little. Through WebKit Inspector I increased the line-height and indent on Jason Santa Maria’s text and I liked it more. I played around with Mark’s site and Jessica’s site as well other random ones and the changes all correlated well with my like or dislike for the indent.

This is, of course, completely subjective, but it does suggest that indents can work well online. I think the key is ultimately to modify different settings to achieve a typographic color that works well.

You may or may not like the indents at the same settings as I did, but I suspect there will be combinations of line-height, indent, font-size, etc. where you do think they look good.

The Demo

Again I created a demo that will let you experiment with some of the settings.

I grabbed the opening paragraphs of The Old Man and the Sea and have them set by default with the following:

 font-family: Georgia; font-size: 1.0em; line-height: 1.6em; text-indent: 2.0em; max-width: 30em;

There are some drop downs at the top to alter each of the above. The different fonts are limited to a few that I think should work on both Mac and Windows. I also added the generic serif and sans-serif options if you want to experiment with other fonts on your system.

The other settings are given a reasonable range, usually around 1em in the middle, though in the case of measure the values range from 17.5em to 50em in steps of 2.5em.

Summary

Again this whole topic is somewhat subjective. The conclusion I drew from my last post was that there’s no single right or best way to style paragraphs, however indents were typically advised for print and there’s a movement among designers to drop the line-space online in favor of using indents.

My casual observations showed mixed feelings in the use of indents, but now that I’ve taken a deeper look I think with the right typographic color, which for me is when greater line-height and text indent are used, especially on larger blocks of text, the indents work.

Play around with the demo and try my preferences and explore some of your own to see if you find indents appealing as well.