Blog Font Style with CSS - Spacing, Alignment, and Line Height

This is part four of the five part Blog Font Style series.

You're just about done with this series and you've learned a lot! You can find the CSS selectors for your text, specify your font families, and set your font's size, weight, and style. You're all set to start experimenting with some more advanced typography with spacing, alignment, and line height.

I'm going to show real examples of these techniques in this tutorial. If you're reading on an RSS reader, you may need to come over to the live site see the CSS in action.

Letter Spacing & Word Spacing

With a letter-spacing or word-spacing declaration, you can set the space between the letters in your words, or between the words themselves. In traditional typography, this is called "tracking". You can use pixels, ems, or percentages to add spacing.

Here's an example of a CSS rule with letter spacing:

p { letter-spacing: 3px; }

And here's how that would look in the browser:

Three pixel letter spacing.

Here's an example of a CSS rule with word spacing:

p { word-spacing: 5px; }

And here's how that looks in the browser:

Five pixel word spacing.

Letter and word spacing are best used sparingly. They can be used to great artistic effect in headlines and decorative text.

Text Align

You know those alignment buttons in your blog's visual editor? The text-align declaration in CSS does the same thing. You have three text alignment options: text-align: left; text-align: right; and text-align: center;.

Here are some example CSS rules with text alignment:

p { text-align: left; }

Aligned left.

p { text-align: center; }

Aligned center.

p { text-align: right; }

Aligned right.

Text Indent

Using the text-indent declaration, you can indent text by pixels, em units, or percentage.

The main use of text indent is to create indentation for paragraphs. In the "olden days" of web design, before web fonts were commonly available, we used to use text-indent to push text off the page so it could be replaced by an image. That's not as common anymore. But you may come across a CSS rule that includes a major indent like "text-indent: -9999em;", and now you'll know what it's doing.

Here's an example of a CSS rule with text indent:

p { text-indent: 1em; }

And here's how that looks in the browser:

I'm indented one em unit from the left.

Line Height

Line height controls the vertical space between lines of text. In traditional typography it's called leading (pronounce it with "lead", as in the metal).

You can set your line height in pixels, ems, percentages, or with a "unitless" number. A unitless number is just a plain number without px, em, or percentage. I'm going to give the next paragraph a unitless line height of 1.9 using this CSS:

p { line-height: 1.9; }

Unitless line height is recommended because it helps prevent unexpected sizing issues due to inheritance from parent elements. I'm using line-height: 1.9 here. If you're interested in learning more about line height, I recommend this comprehensive presentation from Russ Weakley.

Try it Out!

Yet another Codepen for you to play with! This time I've combined the font styling options from previous lessons with today's lesson to give you something a bit more detailed to try out. This demo includes line height, letter and word spacing, and text alignment, as well as all of the font features from the previous tutorials. Feel free to play around and restyle the whole thing!

If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.

Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.

body { font-family: Georgia, Times, "Times New Roman", "Liberation Serif", serif; }

h1 { font-variant: small-caps; }

h1, h2, h3 { text-align: center; }

.author {
  font-size: 1.2em;
  font-style: italic;
  text-align: right;
  letter-spacing: .1em;
}

.first {
   font-size: 1.2em;
  font-style: italic;
  line-height: 1.5;
  word-spacing: .1em;
}

p + p { text-indent: 1em; }Check out this Pen!

What's Next?

You're ready for the final installment of the series! Now it's time to play with color & shadows in Blog Font Style with CSS - Text Effects.