<div class="container">
<p>
The following paragraph's line height is set to 1.4. It is good for readability. The reader's eye won't have a hard time following lines.
</p>
<p class="good">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, atque dolorem blanditiis delectus adipisci tempore consequatur iure sunt sequi unde ullam saepe minima officia deleniti quos optio natus tempora doloribus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, libero, quod deleniti dolores rem cupiditate explicabo quaerat deserunt nemo error possimus voluptate veniam distinctio magnam vel voluptas eos. Quos, vero.
</p>
<hr>
<p>
The following paragraph's line height is set to 2.5em. It creates too much space between the lines that may affect the reading experience in a bad way for some readers.
</p>
<p class="too-much">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, aut, sed, ut totam eaque doloremque non aperiam saepe earum odio repellat dolorum voluptatum ab itaque aspernatur laudantium nam sit labore.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis pariatur ut nam. Odio, perferendis, maiores, magnam hic impedit reprehenderit delectus voluptates tempora ea sapiente possimus at debitis commodi eveniet blanditiis.
</p>
</div>
body {
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
hr {
margin-top: 50px;
}
.container {
margin: 40px auto;
max-width: 700px;
}
.good,
.too-much {
padding: 15px;
border: 1px solid grey;
background-color: #eee;
}
.good {
line-height: 1.4;
}
.too-much {
line-height: 2.5em;
}