This is the archive of version one, made in 2006, launched in 2007, and active until 2012. It’s archived to preserve the original design and its content that was referenced in multiple posts, books and galleries. There’s a holding page before the new site arrives.

/ log / 9th Jun, 2008 /

The Paragraph in Web Typography & Design

Paragraphs are punctuation, the punctuation of ideas. After selecting a typeface, choosing the right paragraph style is one of the cornerstones of good typography. This is a brief inquiry into paragraph style for the Web.

To collect my thoughts I put together a rough page of examples. I was interested in openings and texture more than font style, so they all share the same basic copy, typeface, size, and leading (line height). It was mostly for my own reference and will change over time, but you’re welcome to take a peek:

Typographers use layout techniques like single line boundaries, indents, outdents and versals (drop caps etc.) to punctuate paragraphs in a stream of discourse. Block paragraphs are common to the Web, indented paragraphs are common to print. Browser vendors gave us a default block style of flush left, ragged right with a single line boundary, but there are many variants we can pick from depending on the context.

In any project, the text itself will have its own tone, rhythm and meaning. It’s our job to provide it with a stage on which to sing. Typography serves the spirit of the text, bringing it before an audience, and then quietly fading into the background as the reader delves into the meaning. As Ellen Lupton says in Thinking with Type:

Typography is a tool for doing things with: shaping content, giving language a physical body, enabling the social flow of messages.

In the Web era, designers create narrative spaces made up of text, images, video, etc. We add context and legibility to those formats. We also create spaces where people express themselves. We work with enacted narratives where the content is already available, and emergent narratives to be created over time. Instead of just styling symbols, we’re styling bytes in fluid narrative spaces. We’re bytographers; literally, the writers of bytes, not just glyphs. Yet still, at the heart of this explosion in publishing, is the humble and beautiful paragraph.

From paragraphos to paragraph

Punctuation is a word derived from the Latin punctus, to point. Punctus is also the precursor of the period, or full stop. Punctuation was called pointing in English. It was used to indicate pauses or breaths until the 16th century. Punctuation as syntax didn’t emerge until the Renaissance.

A paragraph was historically a punctuation mark. According to the Online Etymology Dictionary, the word paragraph has roots in the old French word paragrafe from modern Latin paragraphus or “sign for start of a new section of discourse”. That in turn is based on the Ancient Greek word paragraphos, a “short stroke in the margin marking a break in sense". The great reference of the 20th century, the Encyclopædia Britannica says:

In the oldest Greek literary texts, written on papyrus during the 4th century BC, a horizontal line called the paragraphos was placed under the beginning of a line in which a new topic was introduced. This is the only form of punctuation mentioned by Aristotle.

This fragment of a parchment scroll shows a paragraphos (a) indicating the line where the new paragraph starts with a break in the text (b).

Source: The ‘Textual Mechanics’ of Early Jewish LXX/OG Papyri and Fragments by Robert A. Kraft (University of Pennsylvania), The Manuscript Fragments, s.5: parchment roll, ca 100 bce; Rockefeller Museum, Jerusalem.

Parchment roll fragment

Medieval punctuation employed a paragraphus—also known as a “‘gallows-pole’ or upper-case gamma, or § (later ¶)”— to separate ideas in a running discourse.

White space did not punctuate paragraphs until the 17th century. This was the era of Ben Jonson’s English Grammar, where he recommended the use of syntactic punctuation. Around that time, the practise of indenting the first line of a paragraph became part of our standard syntax, along with the use of capital letters for the start of a sentence, and the use of a space between words.

Technology & cost influencing style

Materials and technology have always influenced calligraphy and typography. Papyrus was used from the 4th century BC. It was brittle, so papyrus was rolled instead of folded. Parchment codices became more popular in the 5th century AD. The finest parchment was vellum, made from the white skin of a calf. Next came paper: Invented in China in the 1st century, the first latin text was written on paper around the 10th century. By the mid-15th century it was becoming dominant. Johannes Gutenberg printed only 45 copies of his Forty-two line Bible on vellum, using paper for the remaining 135 copies because it was cheaper.

During the industrial revolution in the 19th century, cheaper wood-based paper emerged along with steam-driven paper making machines. Intuition tells me that also influenced typography. By the turn of the 20th century paper was cheaper than ever before. The cost of inserting a single line of white space between paragraphs—the most common style today—would have reduced. The emergence of the consumer society and rise of advertising also encouraged a change in typographic style. “Fat face” display type was created for bills and advertisements; hyperbole became a style of visual layout. Before the 19th century, the insertion of a full line of white space between paragraphs would have surely been decadent. Perhaps that’s how it became commonplace. However, this is speculation; I cannot find reference to how it became prevalent, so would welcome further evidence.

The single line boundary is the most common paragraph delimiter used on the Web today and the most common browser default style. Generally, the indent is still the most prevalent paragraph delimiter in printed books and publications. In some ways, the block and indent styles exemplify the divide between Web and print. Printing cost is still a consideration looking at some of the mistreated text in certain paperback books, but printing on a screen effectively removes cost as a factor. Usability is the only currency by which web typography is measured. That’s what we’ll explore next.

Paragraphs in a narrative space

The narrative space of a web site is where a story develops as a person navigates the site. This should not be confused with narrative as a text-type. However, in some cases, it does share some characteristics like a chronological order. For example, a blog is a narrative, no matter how broken. It has a chronological order (albeit reverse). Even though a blog has multiple entry points, it can still contain a chronological story. The chapters in that story (entries) may be any one or more of the traditional text-types {narrative; descriptive; argumentative; expository;} but they all form the narrative space of the site.

The narrative space within a web site is made up of three components: content, layout (style and context), and information architecture.

Further reading:

  1. Mark Bernstien writing in his mis-spent youth about narrative on A List Apart

Web design narrative can be compared to architectural narrative: The design of an environmental experience from multiple viewpoints in time and space. Visitors experience a web site in much the same way.

Web design narrative can also be compared to narrative in game design: both create the narrative space via a screen.

In both comparisons, the experience of the narrative space is more than just style and technology. In fact, style and technology are tools to create the user experience. The experience of moving through a narrative space on the Web is complex. We understand that people may arrive in that space from any direction and context (referrer). They may be confronted when they arrive with any number of artifacts that convey narrative information (navigation, main content, calls to action, etc.). Any paragraph style must consider context as well as the meaning of the text.

Thinking about paragraph style

The way we approach the design of a narrative space on the Web is manifold. In most cases the content is not already available. If it is available, it may be subject to revision as part of a redesign process. The vision of the brand and the purpose of the site can seem clear, but may not be upon further investigation. Sometimes, our job as designers is to help refine both the vision and content. It’s during that stage that we explore layout and get a clue to the context in which the typography will live. We call it experience design. Only after that do we get down to experimenting with style.

The context, meaning and tone of web copy should always determine typographic style. Reading the text in full—or at least understanding what the text might be before styling it—is a pre-requisite. A common mistake is to allow the design to dominate the text: Design for design’s sake, or even worse, fashion’s sake. The text is made subservient to the canvas that the designer wished to paint on the screen. This is exemplified by the proliferation of fun, but ultimately harmful, web design galleries. Once a user muscles past the gag reflex, or stops admiring the amazing graphical decoration, they can often realise the design is in their way. The content is obscured. The narrative space becomes broken into fragments, like pieces of torn parchment linked tenuously together by calls to action, or a nested index of links called a menu.

Good typography makes the canvas fit the meaning of the text, not the other way around. It paints pictures with form that enrich the meaning of the words with colour, texture and movement. It is illusive, subtle, and ambient. It’s the shirt that engages from a distance. The closer you get to it the better it seems, but it takes a moment of reflection to even realise why. Robert Bringhurst says it beautifully in Elements of Typographic Style:

One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page. It takes various forms and goes by various names, including serenity, liveliness, laughter, grace and joy.

When trying to energise paragraph text, meaning and context are the most important factors to consider. Meaning flows from the author. They are trying to share a message, a thought, an idea. Context belongs to the audience. They are trying to understand, extract meaning and find relevance. They’re doing so in the context of their own requirements, but also in the context of the page layout and the wider architecture of the site. A refined sense of empathy will help you find the right form for your paragraphs, if user testing cannot be part of your process.

Choosing a paragraph style

There are no hard and fast rules for paragraph style for the Web. Choosing a style depends on all the factors we’ve previously discussed. The 12 example styles I threw together are just a starting point and all paragraph styles need testing in context.

You may find this place holder markup useful when testing styles.

All browsers have good support for basic paragraph styles. However, complex treatments of versals and openings can be problematic. There are still browsers with immature standards support when it comes to using techniques like pseudo elements and adjacent sibling selectors. Our ability to specify fonts for body copy is also limited, and inconsistent rendering across platform and browser persistently frustrates creativity and precision. There’s still a lot to work with, though. Here are a few examples, some new and some that are aging beautifully:


    Rob Weychert used indents to wonderful effect in his Across America diary with text set flush left and ragged right. He also uses a deft combination of indents and small-capped openings in his blog posts. Both are a pristine example of using indents to compliment his particular style of writing. Truly a great example of bringing a love of print to the Web.


    Ed Finkler mixes a font stack of Palatino and Palatino Linotype with boundaries that perfectly suit his content. He publishes a mixture of material that’s often technical, so boundaries help delineate the technical writing for skim reading, while the larger size and typeface adds great texture to his site. For the technical material I might have defined sub-heads a little more, but his choice of paragraph style is instinctively good.


    Andy Rutledge treats paragraphs with love. On his home page, extracts from the three latest posts descend in a beautiful hierarchy of size and tone to indicate the chronology. Individual posts also cascade gracefully. Boundried blocks define his thoughts with great clarity. His material is often instructive, so this style perfectly suits the content.


    Cameron Moll indents paragraphs and uses boundaries. This could offend pedants in print but I find it wonderfully pleasing on the Web. His material is often educational so the division of points by boundaries helps legibility. However, one of the main reasons this style works so well is the font size: it could seem small but the indent with a boundary allows the text to breathe and adds great poise and texture.

A note on indents

If you choose to use an indent, stylistic tradition suggests that there should be no indent on a paragraph that follows a head or sub head. Tradition also suggests there should be no indent following elements like lists and blockquotes. You can achieve this without extraneous markup using adjacent sibling selectors. For example, if you have already set an indent on your paragraphs:

p { text-indent: 2.5em;  }

Then, to stop any paragraphs following a heading of rank 1–3 having an indent you can set:

h1 + p, h2 + p, h3 + p { text-indent: 0; }

However, I would caveat that with only if the blockquotes and indents are set flush left with hanging punctuation. Robert Bringhurst suggests: “If your paragraph indent is modest, you may for consistency’s sake want to use the same indent for quotations.” I agree, and I think the same can apply to lists on the Web. In both cases, a boundary is required to separate the list or blockquote from the surrounding paragraphs.

A note on blocks

If you choose a block style with no indent, but with boundaries between paragraphs, tradition suggests that there should be no indent on either lists or blockquotes. As you may have noticed from reading this article, I don’t always agree, especially on the Web. It depends on the content and the balance of elements. In certain instances, lists and blockquotes might be used to punctuate the running text, which can help people skim read on the Web.

Web != print

People experience the Web differently to print. The Web is not linear; in print people most often read sequentially, from front to back. They may flip, looking for something that catches their eye. After an initial look, they may skip back to interesting items using a table of contents or an index. On the Web this is reversed. Skipping to a certain page via the menu is habitual. This has been encouraged by bad design and web copy writing where inline links in the running text are sparse, if available at all.

Skim reading is the norm on the Web. It may well even be the case that skimming is normal everywhere, it’s only when we become absorbed that we digest the meaning of the text linearly. It’s a way of filtering the noise in a page to try and get to the content of interest. However, this has become essential because of bad design; pages have been confused with intrusive advertisements, overbearing calls to action, and layouts that don’t serve legibility. It has forced people to skim, whether they want to or not. Better designers refuse such harmful techniques. Getting layout and content right in prototyping is essential.

Careful choice of paragraph style (and other body text forms) can accommodate all of the differences in audience behavior and expectations. The optimal paragraph style you choose in summary pages may not be the optimal one for dense, detailed pages. A subtle change may well be necessary in different sections of a site. Choose judiciously, but most of all, designers should know why they are choosing a particular form; “because it looks good” is not a good reason on its own; “because it feels good” may well be.


Browse More Articles


  1. 1. By johno on 9th Jun ’08 at 11:50am

    This is a really wonderful article, Jon.

    As an aside, the Greek root para (παρα*) means "beside, alongside or by", and is the origin of words like parallel and of course paragraph—words alongside).

    I’m going to read it again. great work.

    *Liddell & Scott’s Greek-English Lexicon (had to dust it off).

  2. 2. By Foster on 9th Jun ’08 at 15:34pm

    A great article that will be bookmarked to read again—and to use as a reference.

    Design legibility is key to helping site visitors digest content.


  3. 3. By Min Tran on 9th Jun ’08 at 20:49pm

    Thanks for your in-depth article, Jon. Very nice write-up.

  4. 4. By Sander on 10th Jun ’08 at 02:24am

    Thank you for the explanation, comes in handy just working on a new design and trying to use css tips and tricks. One question about: p + p {..} At what point does this occur? For some reason I cannot seem to get this working at the moment.

    One remark on andyrutledge’s website; I find it hard to read between the serif’s and sans all mixed together, designwise a superb website.

  5. Jon 陳’s profile 5. By Jon 陳 on 10th Jun ’08 at 03:21am

    Thanks for the extra information Johno, etymology is a bit of an interest of mine, as you may have noticed. :)

    Hi Sander, p + p { … } effectively means “act on any paragraph that immediately follows a paragraph”, so it should affect output accordingly. If you have problems, check your specificity; there may be a conflict.

    Thanks Foster and Min. Min, hope the church design goes well!

  6. 6. By ty on 10th Jun ’08 at 06:48am

    Are there any typographers in the house?

    Thanks for enlightening us Jon, great reference.

    I really don’t think too many web designers studied typography, but do like to think they have some skills in that area.

    You’ve obviously done your homework, some of these strike me as creative.

    I skipped to the examples and haven’t yet read the article, albeit the homework.

    It’s about time somebody showed the paragraph some love!

  7. 7. By Hamish M on 10th Jun ’08 at 19:27pm

    Seriously Jon, stop writing such fantastic articles, you’re putting us all to shame. Haha.

    But honestly, great work, and great tips. You’ve done some excellent research on all of the history and origins, etc. Keep it up!

  8. 8. By Mark on 11th Jun ’08 at 04:38am

    Thanks for the great article! I was trying to figure out why some of the example layouts didn’t work properly in my browser (Opera 9.5) and there were two reasons:

    A) you can’t really put unicode characters directly into CSS generated content; you’ll have to escape them:

    which is easy using this handy converter:

    So the paragraph sign would for example become: \00A7

    B) Opera has severe bugs with using CSS generated content and the :first-line selector within the same document, as a result of which the generated content isn’t shown. It’s odd, but it happens. The bug is known to Opera Software.

  9. 9. By hank on 12th Jun ’08 at 07:05am

    Great info, and beautiful to read as always. Cheers

  10. 10. By Leon P on 16th Jun ’08 at 14:56pm

    I really enjoyed reading this: I think I’m getting legibility sorted out, but I’m far from getting texture and subtlety right. 'Painting pictures with form' is very good; without wanting to sound too pretentious, it confers a sense of poetry on humble typography.

  11. 11. By Theadocia on 17th Jun ’08 at 08:48am

    quite impressive mr. bonafide……..i was naive to just how brilliant you really were all those years ago

  12. 12. By Oli Creare on 18th Jun ’08 at 09:46am

    A good article and a good read here. Will be bookmarking this for future reference. I always make sure I use an easy to read type such as Helvetica on my websites and a good size so it isn’t too small or too big. This article will help me to set out my layouts to look better. Thanks.

  13. 13. By Jeff Byrnes on 21st Jun ’08 at 11:17am

    Absolutely spiffy article. Writing an analysis/commentary of the article on my own blog, feel free to check it out when I finish it!

  14. 14. By Chris Hester on 24th Jun ’08 at 03:43am

    I just wanted to say how perfect the layout is on this page. It puts my recent redesign to shame. The side notes are also something I wanted to do but wasn’t sure how to get them to line up correctly. I’ll be delving into the source code to learn more!

  15. 15. By Allison Pennington on 27th Jun ’08 at 09:32am

    Paragraphs are so important! I can’t tell you the number of times I have had to edit the css just to read a long page where the web master never put any effort into the typography!

    Thank you so much for putting together posts like this to help others create beauty!

  16. 16. By Sean Lahman on 17th Jul ’08 at 05:22am

    The thing about typography and design is that it’s not always apparent (especially to the layman) why things work. When it’s well done, you don’t even notice the design, but when it’s not, it’s usually painfully obvious.

    Thanks for deconstructing something in such great detail and educating a hopeless soul like me.

  17. 17. By Max Black on 20th Jul ’08 at 23:45pm

    Jon, I’ve marked this for everyone at our site to read over. We are doing a ground-up redesign and are debating over how to format the enormous amounts of content we have. (The old design just uses Trebuchet MS for pretty much everything--not a satisfying choice by any stretch.) Your article will be of tremendous use to us. Thank you. (Side note: I agree with Chris Hester. Your layout is beautifully done.)

    If anyone would like to make any suggestions about fonts, typography, and paragraphing, please do so: purplesage23 AT yahoo DOT com .

  18. Jon 陳’s profile 18. By Jon 陳 on 21st Jul ’08 at 09:11am

    Thanks for all the great feedback, folks. I appreciate you taking the time.

    Max, your concept and content is right up my street. Glad the article might help. Please get in touch if I can help in any way.

  19. 19. By Dustin Boston on 1st Oct ’08 at 00:27am

    This is a great post. I thought I was doing well with typography, but I have just realized I have much to learn.

    It is easy to focus on selecting great design elements but forget entirely to choose the way paragraphs are treated.

  20. 20. By Franz on 9th Dec ’08 at 12:43pm

    Great examples. As a writer, I find the use of spaced paragraphs to lack the class and readability that comes with proper indentation as well as touches such as first-line openings that are flush left. I’ve tried my best to emulate the typography of printed fiction at Stories & Novels using some of the best CSS techniques I’ve come across.

  21. 21. By jhon on 6th Jan ’09 at 04:07am

    The article is great and very knowledgeable , This is a great post. I thought I was doing well with typography, but I have just realized I have much to learn.

  22. 22. By William of Webtiful on 5th Mar ’09 at 15:21pm

    Hi Jon 陳,

    I think this article should be a reference for every web designer, especially for those who deal with writing. I also like the example enclosed with this article.

    Thank you for sharing. Fantastic writing.

  23. 23. By Lee, Norwich on 14th Apr ’09 at 15:55pm

    Good article. I personally like to see paragraphs with plenty of spacing for easy reading on the web

  24. 24. By karel zeman on 28th Aug ’09 at 22:21pm

    In other words: Crafting good illustrations, making easily understandable graphs, designing a coherent behavior, making good use of white space,

    etcetera is only 5% in a world where we have digital typefaces with auto-kerning?

  25. 25. By Kamran on 23rd Feb ’10 at 05:28am

    very creative and very informative collection. I never thought about these points but your examples are so fantastic that i must take care of these in my coming designs.

  26. 26. By Ben Stokes on 7th Apr ’10 at 13:44pm

    Nice notes to follow on writing websites, thanks for the post.

  27. 27. By Asot on 3rd May ’10 at 09:54am

    Hi Jon,

    Thank you for this great article. I myself write for a blog, and we will be sure to try incorporating everything I read here into our writing style.

    Check my blog on trance music here.

  28. 28. By Henk Inkt on 4th May ’10 at 17:18pm

    These are good tips to follow on writing articles. Also a nice overview of the history of typography and design. Easy and pretty to read.

  29. 29. By sivaranjan on 19th May ’10 at 19:30pm

    Your website is incredibly beautiful and useful. I have taken liberty to add this article to my CSS aggregator site. I hope you wont mind that.

  30. 30. By Steveburner on 19th May ’10 at 22:09pm

    Really great and nice article that will be bookmarked to read again — and to use as a reference.

  31. 31. By Erwin Wellen on 27th May ’10 at 08:36am

    Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your article

  32. 32. By Harry Jackson on 28th May ’10 at 02:32am

    In my point of view this article should be a reference for every web designer, especially for those who deal with writing.

  33. 33. By carl on 7th Jul ’10 at 18:49pm

    Paragraphs and puntuation are discussed in great detail.Thanks for this useful read.

  34. 34. By Martin Lapietra on 15th Sep ’10 at 09:13am

    One thing I need help with is how to hide a tab and its associated header.

  35. 35. By Ruben on 24th Apr ’11 at 04:25am

    Wow this is very helpful for me, typography isn’t my strongest point in writing and I couldn’t find a decent guide that was also easy to read. This is a very nice reference for designers and writers.

  36. 36. By David Leader on 5th May ’11 at 05:31am

    This is an interesting article as it is the first time I’ve seen a justification of block paragraphs on the web, or at least this justification. But I’m not convinced that this is how block paras arose on the web. The lack of any sort of support for text-style paragraphing at the time of HTML 1 and 2 meant that the block para style got established de facto, and most writer of web pages just stuck with it when CSS support spread as they either didn’t care about typography or assumed there was no alternative. (Likewise for dumb quotes.) Moreover in the early days of the web the viewable height in a display was quite small, so I don’t think there really was (and is) no ‘cost’ in adding more blank lines. The cost is that the user has to scroll, and in many web pages (obviously not articles like this) one wants to get as much as possible ‘above the fold’. I think that’s still a consideration, and becoming more so because of the smaller viewport size of mobile devices. Perhaps not so severe with tablets, but using block paras for text to be read on an iPhone is plain daft.

  37. 37. By Marcus Green on 15th Sep ’11 at 01:33am

    Thanks for posting Jon, really useful reference point for paragraphing, also some good styles that you’ve got here that we haven’t tried out before, looking forward to see how they come on!

  38. 38. By Mustafiz Rana on 11th Jan ’12 at 00:15am

    Paragraphs and puntuation are discussed in great detail.Thanks for this useful read.

Comments for this entry are closed.

Lately in the Log

  1. Anakin Tue, 26th Jun 2012 {4}

    I’m pleased to be able to say that Analog is joining forces with…

  2. We, Who Are Web Designers Mon, 19th Sep 2011 {66}

    In 2003, my wife Lowri and I went to a christening party. We were friends…

  3. Ampersand, the Aftermath Wed, 22nd Jun 2011 {3}

    The first Ampersand web typography conference took place in Brighton last…

  4. Design Festival, The Setup, and Upcoming Posts Mon, 20th Jun 2011 {0}

    Wow, this has been a busy period. I’m just back from the Ampersand…

  5. Web Design as Narrative Architecture Wed, 30th Mar 2011 {12}

    Stories are everywhere. When they don’t exist we make up the…

  6. Ides of March Tue, 15th Mar 2011 {4}

    My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

  1. By pixelangry in We, Who Are Web Designers:

    Unfortunately, here in Italy, the figure of the web designer is seen as a figure who plays a nerd on the computer,…

  2. By George in Copywriting, Experience Design, Daleks & Julio:


  3. By Martins in Typeface != Font:

    Great post Jon, I stumbled across it by chance on Google..!!

  4. By DarkStar in Smoothing out the Creases in Web Fonts:

    I agree with Leicester that table is great!

  5. By Martin Varesio in Ampersand, the Aftermath:

    His dry, droll, richly-flavoured delivery was a humorous counterpoint to some controversial asides…

  6. By Steve Blakeborough in Display Type & the Raster Wars:

    Hi Jon, In Elliot’s recent and informative article he suggested you might be bullied…

Live the questions and one day grow into the answers.