This is Part 3 of the six-part series, Make your site’s typography make a statement.
Make your site’s typography make a statement: a series of six posts
- The visual voice of type: basic type terms, so we can start the discussion
- The anatomy of a letterform. How do the parts of a letterform give a typeface its voice? What makes a family appropriate for automotive or fashion, tech or consumer packaged goods?
- This post: A great read: Four simple steps to your best body copy ever a progression from naked HTML to nicely formed paragraphs and subheads
- Picking type for a site, to build a brand: a simple formula (battle-tested during 40 years of continuous use!) you can follow every time that will give you remarkably different looks that seem to arise organically from the nature of the site itself.
- Beyond Google Fonts: where do you find great type families? There are sites full of supposedly free fonts that are full of student experiments and knockoffs of famous brands. There are big sites offering entire libraries of the foundries that built the type we see every day. And then there are the places I go, for bundles, subscriptions and deals.
- Making type work: Across browsers. In block themes. In theme.json (but mostly in the Editor). And with a little PHP and CSS, you can use the entire universe of type sold online today.
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.
Fun fact: Naked HTML is accessible. It takes a lot of work in JavaScript, CSS, and other supposedly advanced technologies to make that accessibility disappear.
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:
Table of Contents
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.
Note: A vw is a number, not a physical thing. That number equals 1% of the viewport width, but you can absolutely make something measure more than 100vw.
In the horizontal direction, 120vw will be 120% wider than the viewport. In the vertical direction, 120vw will be a height that measures 120% of the viewport width—but if your viewport height is longer than that, the whole element will fit on the screen.
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.
Leave a Reply