CSS Text Spacing

Three properties control the horizontal space in text.

1
2
3
4
5
6
7
8
9

<style>
  .a { letter-spacing: 3px; }
  .b { word-spacing: 16px; }
  .c { text-indent: 40px; }
  p { margin: 8px 0; }
</style>
<p class="a">Wide letter spacing</p>
<p class="b">Wide word spacing for this sentence</p>
<p class="c">This paragraph is indented on its first line only. The following lines start at the normal edge, like a printed book.</p>

Tips

• Use em units for letter-spacing so it scales with the font size: letter-spacing: 0.05em.
• Small uppercase text usually looks better with a little extra letter-spacing, around 0.05em to 0.1em.
• Big headings sometimes look better with slightly negative spacing, like -0.01em.
• Don’t add letter-spacing to lowercase body text. It makes reading slower.