CSS Text Spacing
Several CSS properties fine-tune the space between letters, words, lines, and the first-line indent of text.
Good spacing makes text far easier to read. CSS gives you separate controls for the gaps between letters, between words, between lines, and for indenting the first line of a paragraph.
The spacing properties
Comfortable body text
<!DOCTYPE html>
<html>
<head>
<style>
p {
line-height: 1.6;
letter-spacing: 0.02em;
}
</style>
</head>
<body>
<p>Good spacing makes text far easier to read on any screen.</p>
</body>
</html>A unitless <line-height> such as 1.6 is recommended because it scales with the font size of each element, keeping proportions consistent.
Spaced heading and indented paragraph
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
letter-spacing: 1px;
word-spacing: 4px;
}
.story p {
text-indent: 2em;
}
</style>
</head>
<body>
<h2>Chapter One</h2>
<div class="story">
<p>It was a quiet morning when the story began.</p>
</div>
</body>
</html>Note: A line-height between 1.4 and 1.7 is a good starting range for readable paragraphs on the web.
