A great read—four simple steps to your best body copy ever

This is Part 3 of the six-part series, Make your site’s typography make a statement.

If you have spent even an hour trying to market anything, you have heard two sides of a long-simmering debate:

Position 1: “Who cares about the copy? Nobody ever reads it.”

Position 2: “They do if they’re interested in the product.”

But you may not know that there is a Position 3. I’ve held it for the whole time there has been a World Wide Web, and for about 15 years before that.

Position 3: Nobody is going to read anything that looks like this.

This is pretty much what web type looked like in 1995.

That was before style sheets. Before tables. Before almost anything we would recognize as web standards. Reading it makes me feel like I’m sitting next to the net to watch a tennis match.

If you disable all the styling in a theme, it’s still what you get, if the devs have done everything right.

So. Let’s turn that wall of grey into an engaging article people will actually want to read! And you can do it in four steps:

Step 1. Mind your measure

Somewhere in the first two parts of this series (links are in the blue box above), we should have mentioned the length of a line of type. It’s called the measure.

Over the last hundred-plus years, scholars have tried to establish a perfect measure for long-form reading comfort. They have failed to find one.

Advertising-agency creative directors and direct-marketing copywriters will probably never agree on much, but they are generally happy with anything between 55 and 75 characters.

You can split the difference and set the width of a paragraph to 66 characters, then adjust for the width of your actual viewport. In a block theme, you’ll write the vast majority of your styles in theme.json and just a few in style.css, and that holds true here. Most of the defaults you used to set in a CSS reset now go at the top of your `theme.json` settings block. You could limit your column widths globally like this:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "66ch"
		}
	}
}

But using the `ch` unit there will very likely give you some results you weren’t counting on. So while you revel in your secret knowledge of character widths, save yourself some stress and set your width in pixels or rems, or maybe vw units.

That choice would let you write your layout setting like this:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "65vw"
		}
	}
}

Now we’ve got some margins!

Step 2: Get the lead(ing) in

The lines are no longer interminably long. We can see where they start and finish. But it would be easier to see what line we’re actually reading now if there were more space between the lines.

In Part 1 of this series, you saw that the space between the lines is called leading. You will want more leading in your paragraphs than in your headlines and subheads, for a few reasons:

• You need room for your paragraph type’s ascenders and descenders to clear without touching.
• Wider leading will help your reader keep track of what line they’re on as they read a multiline paragraph.
• Headlines and subheads are bigger and shorter, as a rule. They will look like they’re floating away if they have too much leading—and too much space between them and the body text they introduce.

Here’s how to get the leading into your paragraphs:

"styles": {
	"blocks": {
             "core/paragraph": {
                   "typography": {
                         "lineHeight": "1.5"
                    }
              }		
	}
}

Take a breath! Now you have a little more air between those lines. 

For the moment, the space around all the units is the same, because you’ll also set a uniform space between blocks with blockGap in theme.json, like this:

"spacing": {
   "blockGap": "1.5rem"
   }

You’ll add some settings to change that in the next step.

Step 3: Space it out

You set a minimum space between blocks above, but you probably want to vary the space inside some elements and the space around some others.

Inside a section heading that runs to two or more lines, you will want to close up the leading, so the several lines hang together as a unit.

Then I like to add space to the top of that heading, to unite it with whatever copy it introduces, and to separate that unit as a whole from the one that came before.

Here’s a summary of all the code you’ve written to get here so far:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "66ch"
		}
	},
	"styles": {
		"spacing": {
			"blockGap": "2rem"
		},
		"typography": {
			"lineHeight": "1.5"
		},
		"elements": {
			"heading": {
				"typography": {
					"lineHeight": "0.9"
				}
			}
		},
		"blocks": {
			"core/list": {
				"spacing": {
					"padding": {
						"left": "2.5rem"
					}
				}
			}
		}
	}
}

Step 4: Finally!

The copy takes on some excitement when you vary the colors, sizes, weights, and styles of the type in your article.

I realize a lot of design tutorials will say you can never use more than two fonts—any more is awful. So did my professors in design school.

Four decades later I have come to believe otherwise (and will say more in the next part of this typography series). 

For now, let’s leave it at this: if you set a gray wall of type, your reader has to want your information very urgently before they’ll slog through to the end. 

If you break up your copy into approachable chunks, every subhead has a chance to persuade your reader to go on and read further. 

Props to @greenshady, @bph, @webcommsat for help in review, editing, feedback, and guidance.

Next in this series: Picking type to build a brand. See you then!