Tips4Dev

Collection all note for developer

Typesetting Paragraphs on Web Pages

I don’t know who started it, but at some point in the web’s relatively short history, we decided that paragraphs displayed on web pages should be “typeset” in a manner similar to what we see by default in a Microsoft Word document: an empty line after a paragraph, and no indent for each paragraph.

Somehow it was unanimously settled upon that the traditional manner of typesetting paragraphs — with indents and no spaces between paragraphs — is not as readable on a computer screen. In fact, the default styles applied by a browser on paragraph elements encourages the no-indent method. If you throw together an HTML document that doesn’t have any author styles defined, you’ll see the following when you inspect your paragraph elements in Chrome’s developer tools:

Default paragraph styles in Chrome

As you can see, Chrome automatically sets the top and bottom margins for all paragraphs at 1em. Of course, because of collapsing margins, this means there will be 1em of space between paragraphs, not 2em. And if you know your em units then you know that 1em is, by default, basically equal to 16px, although there can evidently be variations in that.

Thus, Firefox does something similar. Here’s a screen grab from an inspected paragraph with no author styles in Firebug:

Default paragraph styles in Firefox

However, it doesn’t seem that everyone agrees with laying out paragraphs in this no-indent manner on web pages. Let’s first go back to a comment posted by Joe Clark on Jason Santa Maria’s blog. He was writing in response to Jason’s post about the newly released A Book Apart title, CSS3 for Web Designers. Clark said:

Now, I know we’re pals and all that, but books are not Movable Type blog posts and we do not write paragraphs with blank lines between them and no indention. (We are not “typesetting” an O’Reilly “book.”)

Apart from simply being wrong and leading to ambiguities when a paragraph ends a page, I find it induces me to leap to the next graf at the tiniest hint of disinterest.

Do please fix.

Here Clark is talking about the fact that the first release in the A Book Apart series has its paragraphs typeset in the modern format, rather than the traditional indent format.

Jason’s response was, in part:

When I originally set the paragraphs with indents, something about the cadence was off. The paragraphs interspersed with the code didn’t quite have the right rhythm. Combined that with the fact that most of the audience probably does the majority of their reading on webpages, it just made more sense to me to go this way.

Interestingly, Jason seems to have since had a change of heart. Although the first two books in the A Book Apart series (including the online version of book #1) use the modern approach for laying out the paragraphs, the method advocated by Clark was chosen for the rest of the books. However, it looks like all the electronic versions of the books use the modern no-indent method for the paragraphs, as shown in the comparison screen grab below taken from book #5 in the series:

Comparing print vs. e-book

So it seems that Zeldman and company have decided that readability on electronic versions of their books is aided by the modern paragraph style. And as a side point, even the Readability app uses the modern style.

But this valid beef that Clark has about typesetting paragraphs is not limited to the printed page. While reading the comments posted on Zeldman’s Web Design Manifesto 2012 (which, by the way, is a must-read for everyone in the industry), I noticed Clark is now pointing out the same problem in Zeldman’s new design:

I’d like your design better if you and everyone in your company and its band of merry men would learn to typeset paragraphs. Microsoft Word is not a model for such typesetting.

And Clark backs up his words. On his own blogs, he styles his paragraphs in the traditional manner. I don’t see a response from Zeldman on that issue.

Is The Modern Method More Readable?

Look everywhere on the web, and you’ll have a hard time finding a website that lays out its content using traditional paragraph structure with no spaces and indents. Personally, I think Clark makes a valid point in the comment on Jason’s blog. First (in relation to print, although it could happen online too), there is a very real possibility that a single paragraph overflowing to a second page could look like two separate paragraphs. And second, due to the scan-everything nature of hurried readers, which I think we unnecessarily encourage, the gap between paragraphs may very well invite less actual reading.

So after all of this, my question is: Are paragraphs easier to read online when presented in the modern no-indent format? What about E-Books? Does the fact that these are read on a digital screen make the traditional method of setting paragraphs less readable?

I don’t have any definitive answers, and it’s certainly hard to argue with the 99% majority who think the modern method is more readable, but I am considering trying out the traditional method when I redesign this blog. After all, the indent at the start of a traditionally typeset paragraph is precisely what CSS’s text-indent property is for.

Source : http://www.impressivewebs.com/typesetting-paragraphs-web-pages/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: