Since a paragraph is defined as ‘one or more sentences of text that deal with a single point or idea’ (or a passage from a single speaker), it’s a good proxy for ‘the smallest block of text’ that will comprise our layouts: everything from the teaser text in a card layout to welcome text on the home page to long-form article content deeper in our sites. In each case, they are meant to be read—so they need to be set in a readable manner.
The rule of three
When considering a paragraph and how to set one well, there are three parameters that work together: font size, line height (or ‘leading’ in traditional parlance), and line length (or ‘measure’). I’m including the traditional terms here because I think it’s important to connect how type has been set by typographers and graphic designers. Understanding the terms and using them properly helps us understand one another—and the intent behind a given design file—in important and fundamental ways.
Much research has been done over the years that has lead to 12pt type being considered a standard size for readable text in print. Based on all sorts of data about average arm length, distance to your eyes, and various light conditions—it has come to represent ‘normal.’ Since the advent of the personal computer, similar research has been done around how far the average person sits from an average size monitor, and over the years that slightly increased distance has led every shipping desktop browser to standardize on 16px (note pixel, not point) as the default font size for body text.
The keen observers among you are likely asking all sorts of questions about desktop vs laptop vs phone, real pixels vs reference ones, and exactly what an average distance is from what average device. Suffice it to say that ‘font-size: 100%’ will in general give you consistent text size equivalent to 16px if you could imagine that being some sort of actual size. On phones however—it can be different. Every manufacturer does their own research, and you can sometimes see the physical differences, though they’re usually relatively minor.
The pertinent point is this setting—‘font-size: 100%’—will in all cases give you what that device manufacturer or OS/browser vendor represents (and has tested) as a good, readable text size. Generally it’s best to go no smaller than that device-determined 100% for body copy, though on larger screens you may want to correspondingly increase that body copy size to better balance the layout and factor in a slightly greater viewing distance from those very large screens.
Line height (leading)
The distance between two lines of type is generally referred to as ‘leading’ in print design, and I really love the origin. If you look at a block of text set in metal type with no additional spacing between lines, it is referred to as ‘set solid.’ If additional spacing is desired, a thin flat piece of lead would be inserted between lines of type. This could be adjusted by adding more strips or thicker ones. The purpose of doing this is to both make text easier to read and also allow for varying the mood or effect desired. On the web we have adopted the phrase ‘line-height’ to indicate the distance from the baseline of one line of text to the next.
Text set too close together gets harder to read, especially as line length gets longer. That’s why there's an important relationship between line-height and line length. Most tutorials and textbooks I’ve seen will default to starting at 1.5 times the size of the time. So it would follow that a default text size of 16px would be set with a line-height equivalent to 24px (1.5 x 16).
Line length (measure)
Robert Bringhurst wrote in his seminal work The Elements of Typographic Style that the ideal line length for text is from 45 to 75 characters (the low end for things like newspapers, the high end for longer form text like articles or books). The theory there is if the line length is too short, it looks choppy and there are not enough words or syllables to find a good rhythm in reading it. This reduces reading speed and increases fatigue. If the line is too long, it becomes harder for the eye to accurately (and quickly) follow the line to the end and get back to the start of the next.
The essence of these three characteristics is balance. You can’t change one without reconsidering the other two.
Remember—these considerations originated in a time when the page size and physical type didn’t change. They also hang heavily on something else: familiarity. We find text set in a particular way easy to read because that’s what we’ve become accustomed to seeing. We find particular kinds of typefaces easy to understand because we see ones like them all the time. Italics originated as a metal type interpretation of handwriting, and used to be the norm rather than the exception. Today, seeing an entire book set in italics would seem alien.
With the advent of the web and mobile devices, what we consider normal has evolved, both bigger and smaller. Some research indicates that familiarity has lead to slightly longer lines of text being as easy to read as the idealized 75 characters (perhaps 80-90). And screen resolution has improved enough that serif fonts can be rendered as cleanly as sans-serif ones, which for years have been held to be more readable on the web.
But as mobile devices have become dominant, that prevailing minimum of 45 characters is difficult to achieve without sacrificing font-size. So on smaller screens we have to also think about margins left and right, allowing them to shrink a bit and give more space to the text.
Because we cannot know where our text will be read, our typography has to respond to that context and allow for font-size to grow, line-height to increase, and line length to be capped in appropriate ways as our design is viewed on mobile and ever larger devices. This is the heart of responsive web design, and by extension, responsive typography. Now let’s look at how this might work.