This article was originally featured in PRINT’s Fall 2015 issue, The Text Issue, from editorial director Debbie Millman and editor Zachary Petit.
How can we build a better web experience? By unboxing the fascinating history of the paragraph, and figuring out how to best apply it in our interactive work today.
There are a lot of articles, posts and books about the importance of typography and how to practice it and implement it well. There are also a lot of articles about using type well on the web. Indeed, I’ve written some of both. But much of what’s been written, my own body of work included, focuses on the larger landscape of typography, and more broadly on how to technically implement web fonts well. Earlier this year, when I began working on a new talk for a couple of events, a different perspective came to mind.
A number of years ago, a large bank ran an ad campaign about processing millions of checks every day. The message focused not on processing that many checks successfully, but rather on processing a single check well, and repeating that process millions of times every day. In that same spirit, I thought about typographic systems on the web and how most frameworks focus on building a global system looking in— and how that view could be flipped to develop really great typography from the inside out.
Mark Boulton wrote that we should “create layouts from the content out.” Or, as Elliot Jay Stocks wrote, we should be “designing from the type outwards.” In keeping with other leading minds of the day, both were driving at the notion that good design starts with the content, because the final form of consumption (a magazine, a website or a mobile application) now varies widely.
But that’s still referencing the whole of the content. We need to dive deeper, in parallel with a trend in web development that tries to shape the smallest elements and patterns. This creates the most robust and flexible design system that works well on the tiniest phone screen on up to the largest desktop monitor. Likewise in content we need to focus on the smallest element and build from there.
So let’s start with the paragraph.
Just like the traditional Chinese saying, “a journey of a thousand li starts beneath one’s feet,” so must every volume begin with a single <p>.
If we start by designing one great paragraph, down to every fine detail and nuance, as our content builds out, so will our typographic system, giving us a flexible, robust and considered foundation for the entirety of our content and the site beyond. This is true for any sort of site, but even more so in the age of responsive web design when our content needs to work well across nearly limitless numbers of screen sizes, resolutions and technologies.
In thinking about just what it would mean to design a paragraph well, I started to think about the concept of the paragraph itself. Where did it come from? What does it mean? To move forward, I thought it would be helpful to look back. So I started to dig. A paragraph has been defined variously as a thought, an idea or, my personal favorite, “a basic unit of discourse” (thanks, Wikipedia). As it happens, the earliest record of the paragraph I could track down dates back to ancient Greece. I found mention of the termparagraphos, which refers to a physical mark on the page meant to signify a change in speaker or passage. You can see the underlines in the image below of Menander’s Sicyonians, dating back to the 3rd century B.C.
The underlines in Menander’s play Sicyonians display one method of how speaker changes were introduced prior to the paragraph we know today.
This use of the term (and concept) to reference a physical mark carried forward throughout the Middle Ages, as scribes began to standardize a mark similar to paragraph symbol used today that we now know as the pilcrow (¶). It wasn’t until the early 16th century that the definition of what a paragraph “is” shifted from the physical mark to the actual passage of text in a piece of writing, and our modern terminology came to the fore.
Interestingly, this shift coincides with another major shift in the production of books: the invention of movable type and the printing press. Whereas the pilcrow was still used inline to denote the beginning of a new passage, with the practice of typesetting came the fashion of starting a new line at the beginning of a new paragraph.
Initially it seems there was a practice of leaving an indented area for illustrators to fill in an ornament or illuminated capital, but here the pace of progress and speed of printing left that practice behind.
The swiftness with which books were being printed was too fast for illustrators to keep up, and soon we were just left with the blank indent. Centuries later we have Robert Bringhurst to thank for that space being standardized at one em.
Another milestone in the production of long texts came in the form of the typewriter, first made commercially available in the mid-19th century. This brought about the first widely available technology for the general public to create something more than a handwritten letter. While the fashion of the times was still an indent, somewhere along the way a new convention evolved to indicate a new passage or thought: the double line break. While I can’t find anything conclusive, my own theory is that basic human laziness won out: It’s simply easier to hit the Return key twice than it is to remember to hit Return with your right pinky and Tab with your left.
So here we have four different ways of denoting a new passage or thought, and we can actually see three of them in regular use today, though each has a distinct fit with how we read and take in information. Indenting is still by far the most common technique in longer-form writing that appears in books and magazines. This seems to fit well with how we read, and likely minimizes interruption and flow; the small indent gives us a gentle nudge without any extra line space disrupting our progress. Meanwhile, the extra line break works well on the web, where we tend to skim more in our hunt for relevant information, making the gaps between passages and speakers more readily findable.
As for the pilcrow, at first I thought it was a contemporary outlier, confined only to the “revealed codes” of word processors and page layout applications. But then one day I was reading summaries of stories in a daily email from the website Medium and there it was: the pilcrow showing itself all over the place. Turns out the designers at Medium wanted a way to reconcile the irregular form of the first few dozen words of any given post and the need for more compact presentation in an email, and had settled upon replacing paragraph line breaks with the pilcrow. This has a wonderful effect, making a much more uniform presentation while sacrificing none of the clarity imparted by the line breaks in the original form. While this might not work for a whole article, it works perfectly in the short teaser text used in email blasts.
More recently I found another great example in The New York Times Magazine. In the technology and design issue back in May, th
e designers used a pilcrow in place of a line break only on the first two-page spread of each story. This kept the text in a more uniform “color” block on each spread, but preserved the intent of the writer in a very clear manner. The typographic treatment went back to a more standard format on subsequent pages of each article.
In each of these cases, the ability to translate time-tested typographic techniques to the web are universally supported. We just have to think beyond the usual generic styling of “margin-bottom: 1em”—something most of us have lived with for nearly 20 years, simply because we didn’t think we could do much more.
Even beyond the basic separation or indication of paragraphs, there’s still much to consider in our quest to design the perfect <p>. To that end, here are a few key areas to investigate.
THE KICK-OFF
For starters, how about the start? We’ve historically added emphasis in a couple of ways: through the use of drop-caps or via some sort of style on the first line. But in the age of ever-changing dynamic content systems (like WordPress or Drupal) and screen sizes making the exact length of any given line an ever-moving target, how can we ensure the preservation of a design technique without unduly burdening the editor of the site?
As it turns out, it’s not that hard. Using a few simple lines of CSS, we can easily style the first letter of the first paragraph any way we want, without requiring any special effort on the part of the site maintainer. Want to make the first line of that paragraph bold, or even use small caps? Do some Googling, and you’ll discover that’s pretty simple too, and once again requires no special effort to maintain.
THE MEASURE
As mentioned, another big challenge on the web today concerning all the myriad devices used to access it is measure—or in more common web terms, line length. Dynamic content, scaling designs and varying screen size make it impossible to finely control line endings, rag and readability. While we still have some browser issues to contend with, we do have hyphenation available to us in at least a few of the major web browsers (as of this writing: Safari, Firefox and Internet Explorer 10+). This is especially helpful with narrower screens. Good practice for readability generally means leaving the body copy size alone rather than scaling it down on small screens, so getting a reasonable line length is much easier when you can enable hyphenation. But while some may be tempted to further tidy up by adding justification, sometimes it’s best to remember that just because you can, doesn’t mean you should.
On the other end of the spectrum, it’s critical to remember that while the increase in reading on the web has made slightly longer line lengths more common than Bringhurst’s ideal of 66, keeping them from getting unreadably long by simply adding a ‘max-length’ on your content elements keeps things in check.
THE ORPHANS
Everyone cares about them, but did you know we can easily save them all? Dynamic content and a plethora of screens have left most editors simply wailing and gnashing their teeth in the face of orphans cropping up all over a site. It’s hard to keep single words from getting pushed down to a new line when line lengths keep changing. Thankfully there’s a fix for that, and it’s another simple combination of a long-standing feature anda bit of automation smarts. For many years on the web we’ve had the notion of a “non-breaking space” character that, when placed between two words, looks like a normal space, but will not allow a line break to happen between those two words. The automation in this case takes care of looking at every paragraph (or in some cases, other blocks of text you define at a site-wide level) and dynamically inserts one of those non-breaking spaces between the last words, ensuring that even as screen sizes vary widely, we’ll never see a single word on its own at the end of a paragraph.
If you’re using any PHP-based content management system like WordPress or Drupal, there are modules or plug-ins you can use, as well as a couple Java- Script-based solutions you can incorporate virtually into any site where you have access to the front-end code (such as Typogrify module, PHP library, Type.js and widowtamer.js).
¶
Each of these ideas and techniques are in and of themselves fairly small (and easy to incorporate). But that’s the whole idea: By exploring and really being thoughtful about all the small details that go into designing one paragraph, when the paragraphs start adding up to a larger body of text you’ll still have a very robust, scalable and consistent foundation upon which to base the rest of your typographic system (not entirely unlike that bank and those millions of checks). And as you can see, there is far more you can translate from your traditional graphic design and typographic background to the web than you might have thought. So start with your content and the purpose it serves. Then look at all the details you can bring to life. You’ll be amazed at what a life it can be.
What do design and text have in common? A lot more than you might realize. In PRINT’s fascinating Fall 2015 issue, editorial director Debbie Millman and editor Zachary Petit explore a side of design that is rarely talked about—but inextricably linked.