Proper text spacing is incredibly important. Get it right and your posts will be more readable and skimmable which leads to a better UX and longer session times.
Get it wrong, and your visitors will quickly hit the back button, raising bounce rates and killing your conversions (and harming Google rankings).
Out of the box, WordPress gives you very little control over the spacing of your text elements, such as headings, paragraphs and lists. Instead, spacing is mostly handled by your theme (or custom CSS).
In this guide you’ll learn: How to adjust text spacing in WordPress.
We’ll cover:
- Line height vs. Margin
- Spacing Units (px & em)
- Adjusting line-height
- Spacing between paragraphs
- Spacing between list items
- Spacing after headings
- Advanced text spacing
Line-height vs. Margin
The two most common types of spacing you’ll want to control in WordPress are line-height and margin. All text blocks utilize both these properties when determining white space.
Here’s an example:
Above you can see two short blocks of paragraph text.
Gap A is controlled by line-height, which is the line spacing within a block of text.
Gap B is controlled by Margin which is the spacing between elements.
Adjusting Line Height in WordPress
All text elements have a line-height property that can be adjusted using CSS. This includes Headings, Paragraphs and Lists. Your theme likely already has default line-height affecting these elements.
Recommended Setting: 1.6 is good line-height for most websites. This makes your line-height 1.6 times the font size (gap is 60% of font size).
To adjust it you can either:
- Control it in your theme settings (if available)
- Change it with CSS
Changing line-height with your theme
Check your theme’s typography settings which can be usually be found inside the WordPress customizer. For example, in my GeneratePress Premium theme I can control line-height, margin, and font-size for all my text elements.
Adjust line-height with CSS
You can easily add custom CSS to the WordPress customizer and override your theme’s defaults, but first we need to know what rule is currently setting the line-height so we can override it.
To do this, you’ll need to inspect the front-end CSS to find the correct selector.
For example, when I inspect a paragraph tag on my site I can see the line-height is being set by this rule:
My theme is setting a default line-height for any element inside the <body> tag (which is everything visible). To create more specific rules tailored to exact elements, we can use a more specific selector.
For example:
body {
line-height: 1.5;
}
p {
line-height: 1.6;
}
h2 {
line-height: 1.4;
}Code language: CSS (css)However this is an unusual example. 1.6 is a pretty good default line-height for most text blocks. But you can adjust this as needed.
Why line-height matters
A well-chosen line-height makes your content easier to read. You want enough gap that users can easily find the next line when looking back to the left edge of the text. You also don’t want it too large, which can require extra effort for the eyes, and can muddy the distinction between a new line and a new paragraph.
Spacing between Paragraphs
You want a clear break between paragraphs. This white space serves as a visual cue that each block contains a distinct idea. It also helps up break up a wall of text and makes your content less intimidating.
Spacing between paragraphs is controlled by margin. I prefer to use bottom-margin, but some theme developers use to top margin instead. Either is fine.
As with line-height, it’s good to check if your theme has a built-in paragraph spacing setting. Mine does:
My paragraph spacing is set to 1.3em, which works out to 23.4px (font-size of 18px).
You have a lot of flexibility regarding how much white-space to use between paragraphs. Just make sure it’s at least as big as your font-size, and ideally twice as big as the gap between lines (controlled by line-height).
Change paragraph spacing with CSS
Like with line-height, you’ll want to inspect your front-end using Chrome Dev Tools or Firefox DevTools to see which rule is setting your paragraph margin.
In my case, the rule is:
So I can override this by placing the exact same rule in customizer > additional CSS and changing the margin-bottom value:
For example:
/* Even more paragraph spacing */
p {
margin-bottom: 1.5em;
}Code language: CSS (css)The Customizer CSS gets loaded after your theme’s stylesheet, which lets you override the styles even when using the exact same selector.
Spacing between List Items
Controlling the spacing between list items in your ordered (numbered) and unordered (bulleted) lists can be a bit tricky.
Best Practice: Use margin, not line-height to control spacing.
To adjust the gap between list items, you should use margin. Changing line-height seems to work fine for single-line items, but causes issues if your list item wraps to multiple lines.
Try the toggle-switch below to see an example list with different margin-bottom values:
- This is a an example list item
- Here is another list item
- And a third list item
- A fourth for good measure
Spacing for Heading Tags (H2, H3, H4)
Heading Tags need sufficient white-space to give visual separation between the sections of your content. This is especially important for H2 tags (major headings) and H3 tags (sub-headings).
You want extra margin above your heading tags to provide a clear break from the text above, and enough bottom margin that it doesn’t crowd the text below. A good rule of thumb is a 2:1 ratio of space above/below your headings.
Using Chrome DevTools, here’s the spacing used here at BTW (shown in orange). I’m using a margin-top of 50 and margin-bottom of 20 (2.5/1 ratio).
Use CSS to change white-space for Headings
We can target our CSS rules using the appropriate H tag for each heading level. Depending on your theme, you may want to add the class of the content container for more specificity in your rules.
Here are some example values:
h2 {
margin-top: 50px;
margin-bottom: 20px;
}
h3, h4 {
margin-top: 36px;
margin-bottom: 18px;
}Code language: CSS (css)To target these rules to only your content container (exclude sidebars and footer), you’d need the CSS class of your content container. You can find this by locating the parent container that holds all of your content. On my theme it’s .entry-content (yours will likely be different).
Then we can reformulate our CSS rules like this:
.entry-content h2 {
margin-top: 50px;
margin-bottom: 20px;
}
.entry-content h3, .entry-content h4 {
margin-top: 36px;
margin-bottom: 18px;
}Code language: CSS (css)Learn more: How to properly use heading tags in WordPress
Advanced Text Spacing
We’ve already covered the most common white-space settings, which are line-height and margin. But you have even more CSS properties at your disposal:
Word spacing
You can adjust the gap between words by using the word-spacing property.
Example Usage:
p {
word-spacing: 5px;)
}Demo: word-spacing example
Letter Spacing
You can even tweak the spacing between individual letters. This is typically measured in fractions of a pixel, but you can make the value as large as you want.
p {
letter-spacing: .5px;
}Code language: CSS (css)Example: CSS letter spacing
White-Space
The less-known white-space property lets you control how white-space is handled within an element. For example, if you find that your buttons break on small screens (words wrap to multiple lines), you just need to adjust this property.
For example, you could target a specific button by its class-name to prevent wrapping.
a.button-name {
white-space: nowrap;
}Code language: CSS (css)Learn more: white-space CSS property
Single Line Breaks in WordPress
By default, WordPress creates a new block of text each time you hit the enter key. But what if you want to start a new line without creating a line-break gap?
You can just hit shift+enter to jump to a new line without a full line-break.
Like this:
See, no gap between lines!
Just hit shift + enter
Wrapup
Text spacing is incredibly important, and it’s worth putting the extra effort to customize it for a better user experience.
While WordPress has very few built-in text spacing controls, its easy enough to customize with a bit of CSS.
There are also several excellent themes with built-in text spacing controls.
Recommended Themes:
- GeneratePress (pro)
- Astra (pro)
- Blocksy (free or pro)
When using CSS to customize your text spacing, I recommend using the devtools feature in your browser to see which rules are setting the margin and line-height for your text elements.
For a crash-course in how to use Chrome DevTools for CSS, watch this video: