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:
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:
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:
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.
Body copy on the web is often broken up with images. I personally feel that using margin between paragraphs works quite well when also using images, as the vertical rhythm appears much less affected.
It’s somewhat subjective, and they both work, but I feel the non-indented modern way is more readable. And Louis, you make a good point about a paragraph continued to a second page appearing to be two separate paragraphs. Otherwise, I feel the contrast and white space between two paras makes for a clearer separation. Perhaps we can better know through more designers performing usability testing on this.
Thanks for bringing more awareness to this.
You missed out justification. Indented paragraphs are more readable with justified text because the shorter line and the end of each paragraph is more obvious. Lack of hyphenation support has meant that justified text hasn’t really been an option on the web.
I think both patterns are simply the result of technological limitations. Indented paragraphs are clearer across page breaks and the lack of white space keeps wasted paper to a minimum, so this became the preference in print. Wasted paper and page breaks aren’t issues on the web, but there is a problem with justification, so people use spaced paragraphs.
As the technology gets better, you get a choice in both formats! Personally, I don’t think either is better than the other.
I don’t think that the only reason paragraphs are easy or not to read is wheter they’re indented or have margins. Legibility is a combination several factors.
Now that you bring up the subject, I’m thinking that indented paragraphs would work very well on a small screen (mobile) and margins better for the desktop.
Maybe you should have typeset this article in a traditional fashion? i do think that it is more readable to not indent paragraphs, but it would have been a good test. You rarely see it these days. I had a so called ‘Communications Manager’ once who told me that all paragraphs should be ‘D-shaped’ (this is for print) and words should be carried over to the next line if the whole paragraph does not have this shape. I’ve never heard anything so ridiculous! Text should form its own natural shape and I don’t think this in any way affects the design or communication function. but yes, on screen, squared-off text blocks are easier to read.
Haha, believe it or not, I was very close to doing the paragraphs in the traditional way on this article and decided against it at the last minute. I actually tested it using Chrome’s dev tools but I wasn’t too crazy about it. :)
I just discovered Text-indent. I don’t remember what project I used it for. I think it was for my attempt to make a webpage that looked like my resume. I was thinking of adding hanging indents because I like that style and it would make my blog stand out.
Now that I understand CSS better, it is super fun to play with. I totally agree with Emma. You should try it out traditional indents for a post or two and see what everyone thinks.
Seeing indents on paragraphs on web content almost always throws me off the reading flow for some reason or another. Probably because when you start on a new paragraph, the starting position is a bit different. Might I say, displaced. Also, having the paragraphs clumped without any spacing between paragraphs just doesn’t work well on the web when you scan for things quickly, and… well.
Seems to me it is a matter of the content and the typical way we consume that content in the various mediums. The web is loaded (I’d say the majority) with content that is consumed in a rapid scan manner. I sure didn’t methodically read every single word of this article. I jumped many times to gather the good gist over the course of 1 minute instead of 5 minutes. Having more clearly visible breaks between paragraphs helps that along.
You could argue then, perhaps, that the old or new form can be used as a control over the reader’s speed in these times (an interesting idea, IMO).
For someone so concerned about typography and design aesthetics, Joe Clark sure has an ugly website. I can see numerous areas where his own typography and design could use improvement so I find it kind of ironic that he would be giving Zeldman advice. He should be cleaning up his own house before criticizing others about theirs.
I don’t think it’s fair to say his site is “ugly”. That’s a matter of personal taste. His site is quite readable and the design is fine for a personal site.
We should typeset in the traditional Roman manner – all majiscule with no spacing or punctuation.
Microsoft changed the way we layout paragraphs!!
Thats probably because everyone who owns a computer thinks they can publish a blog, website, newsletter or lay out a resume.
I have a friend who says that our school newsletters remind her of a ransom note, with too many font variations and size fluctuations.
There are rules people…..
There was never any attempt to make Web pages “more readable” by anyone who uses blank lines and no indents. As with Microsoft, they never knew what they were doing in the first place. There was never a conscious intent, hence there is no “agreement” that unindented grafs are “more readable.”
I assume you Googled around a bit and found Islands of Thought in Macrotypography?
It isn’t in dispute that the right way to typeset body copy is solid with indents on paragraphs that follow paragraphs. Basically every page you’d ever read before you fired up MS Word or began reading crappy TypePad blogs was typeset that way. (Unless, of course, the only thing you ever read growing up was mid-century Swiss design manifestos.) At a later point we would have to start talking about line length, but since I know this is going to devolve into Windoid or open-source autistics insisting they can read everything just fine, I’m not going to bother.
It isn’t? I would love to read usability studies on this topic (this is not sarcasm). I’ve only run across studies suggesting something about sans-serif vs serif for screens, and something about “Thy Lynes Shall Not Exceedeth 80 Characters” (which seemed not to take into account how much the user has enlarged the text, or if the language has long words (Dutch, Swedish, German…) rather than the short and sweet little words found in English. Did that arbitrary limit not come from a technology limit?).
Do we not have people coming from two directions here? There are content-writers/authors, who care that their content is read (or skimmed). And there are, sitting absolutely directly across from them, designers who care about how it looks. Now actually I don’t mind the latter getting their way on web pages so long as it’s not a pain in the butt for me to write my own user stylesheets to turn Pretty text into Readable (for me and not necessarily anyone else) text… but I would like Grandma to be able to do the same, without extensive CSS knowledge.
It is a wee bit insulting for someone to call a group of human beings “open source autistics” simply because of what they happen to find readable or not, and maybe disagrees with what that someone personally finds readable. Readability of some content does indeed vary from person to person, user to user, and it depends on how we intend to read the content, and how much time we have, and how late in the day it is, how tired we are and how distracted we may be. In print, we have little control, and if they serve us paragraphs stuck together with first line indented and justified text, we must eat that. We get to wait extra months for the “large print” version for example, if it ever comes. On the web, the possibility of user control is so much greater. It just needs to be easier.
I think that might end the whole web typography debate, really: readability for everyone, regardless of the personal design preferences of the author. Sounds like heaven.
I’ve built a few sites that use indented paragraphs. They’re all owned by the same client and he insists on indented paragraphs. I built him this site back on 2004-2005 and we argued over indented paragraphs vs. the “modern” style. You can see here: http://jewellrealestateagency.com how he has the indented paragraphs. Even more interesting is that you can link to several of his other sites which also all have indented paragraphs – and most likely Georgia at 15px. Designed to this day for his 800×600 desktop CRT Monitor.
don’t think that the only reason paragraphs are easy or not to read is wheter they’re indented or have margins. Legibility is a combination several factors.
Noor Rahman Azeemi
to be honest all of you did very valuable words, but want focus on this point , that we shouldn’t criticize on other, and try to find the rook cause… that’s it.
Good food for thought, Louis. The first time I saw a book using sans-serif type, I had to blink a couple of times to realize what was “off.” My print expectations are like most everyone else’s: I like my printed words in a nice, understated serif typeface and my paragraphs snuggled one underneath the other without spacing and with a modest indent. But again, like everyone else I’ve grown accustomed to my words on screen printed (usually) in an unassuming sans-serif without indents and with paragraph spacing. It’s a matter of convention, if we define “convention” as “what I’ve seen so many times I don’t think about it any longer.”
I took a look at Joseph’s real estate site to refresh my memory on what a Web site using indented type looked like, and sure enough, I didn’t like it. (I also noticed that the paragraphs on that site have the “web-traditional” paragraph spacing.) In that formatting, the indents seem superfluous.
So what’s the “right” answer? I’ve spent a lot of wordage in this post nattering about nothing, and I don’t have a definitive answer. I don’t think anyone else does, either (same point my pal Poes made). What works best for me might annoy or confuse someone else. I do think it’s interesting that relatively rigid Web typography “conventions” have slammed themselves into place in a fairly short span of time, to the point where many of us are uncomfortable with sites that “violate” them, and you can start a healthy discussion merely by musing on the effects of using “old-fashioned” print conventions in a Web publication.
As with everything else Web, we try, and sometimes succeed to a degree, in meeting the needs of every possible user, from the “open-source autistics” to the rigid old coots who want everything lined up into nicely indented blocks using Times New Roman, and the neighborhood kids the hell off of their lawn.
I like Stomme’s idea of giving the user control. My vote, primarily as a consumer of web content, would be for indented paragraphs – but maybe it depends on the content. Maybe some publishers *want* us to to skim. With computer screens getting shorter and fatter, and windows/gui designers insisting on taskbars, menubars and other controls across the top and bottom of the screen, the vertical space left for reading content is constantly under threat. Additionally, with Windows lack of smooth scroll (still!) I don’t believe I’m the only one on the internet who selects a chunk of text before reaching for the scroll wheel just to give a visual cue in a long section of text. What I’m talking about is being able to give me enough text to provide an immersive reading experience, and I think indented paragraphs with less space between helps. After all, every time I have to reach for the mouse to scroll, I might click away from your precious content. My kindle can ‘disappear’ in Bill Hill’s sense (his ‘Magic of Reading’ is googlable and relevant though a little dated), and I much prefer indented, space-free paragraphs preferable on it.
But maybe not all content is desirable to be ‘immersive’. All the same, the more that can be done to remove the computer from between me and the text, the better.
I’m not pointing to any religion of typography in this situation. But in my experience, when Google is a stranger, and Twitter was just a bird. I took a lot of complain from my members on my Discussion Board (Ah, a good old phpBB era) just because there’s no space between two paragraphs.
And A lot of comments on my ancient phpNuke based website are complaining about long text and that they didn’t want to continue to read.
Let’s remember WHY things are done, not just HOW when deciding on a typographical style to follow.
In the days of of Gutenberg paper was rare and expensive and as such needed to be used frugally. I am also certain that, as the ability to read was also present in a few elite individuals, that “readability” and “accessibility” were ever so thoughtfully considered. It was considered the responsibly of the enlightened user (reader) not the author to know where paragraph started or ended. This is, BTW, ONE reason why wide margins became considered a sign of quality and value, as it NOT only gave the page breathing room but demonstrated that the patron could afford the “wasted” paper.
Devices typographic such as hyphens and indenting ( instead of spacing) paragraphs were created as a way to utilize every single .mm of paper while still demarcating the start and end of paragraphs. By the time MS Word came to be paper was cheap and life was more fast paced. Most documents were printed to be edited ( and thus double spaced) and a slew of other functional considerations came into play which were more than maintaining the ‘monk’ traditions.
On the web, some of these concepts are completely obsolete. How would you prevent a widow when the user can resize or change the font..or even the size of the ‘page’? How can you even have orphans on digital media when your columns can be infinitely long?
I suppose, in the care of paragraphs it could be argued either way, tradition vs. scanability. I am having fun styling this rely in a classical manner, but I think typography should adapt to take advantage of all current resources rather than just attempting to preserve a dogma created for outdated reasons.
There is at least one readability study that finds the “modern” no indents, blank space between paragraphs style to be superior.. I can’t seem to locate it now and was hoping it would be cited in this article or the comments, but, so far no luck.
Reading on-screen and on-paper text differs quite significantly for me. Personally, I find that “modern” style far more manageable for on-screen text. In paper docs I’m used to the indent without space between paragraphs format.
Traditionally, paper books set paragraphs one of three ways:
1) The highest quality books were set with no indent, and a one line space between paragraphs.
2) Medium quality books were set as you call “traditional” with a leading indent, and no space between paragraphs.
3) Low quality books were set with no space between and no indent — the only way one could see the paragraph breaks was by the ragged right of the last line of the previous paragraph.
Now on flow documents, like web pages, vertical space is pretty much free — since we are just scrolling up and down anyway. On small devices horizontal space is very much NOT free — if you waste horizontal space people can’t read your stuff, or won’t want to. So the point being, please feel free to use vertical whitespace, including line-between paragraphs, but if you do then DON’T also indent your paragraphs — no “belt and suspenders” please! If you do use the indent style, remember after page breaks, section breaks, images, etc., the first paragraph to follow is NOT indented. All in all the “no indent line between” style is the easier to use.
Now there are some exceptions: If writing very long paragraphs then the eye, and the mind, loves the break a blank line give you.
Conversely, if writing a bunch of short “one liner” dialogs, then putting a blank line between each line of dialog tends to make reading the prose seem slow and leaden.
PS: there are still some small devices out there which don’t merge top and bottom margins — ouch!
> no “belt and suspenders” please!
Ha… love that line. :)