Line Height

Class	Properties
lh-1	line-height: 1;
lh-2	line-height: 1.25;
lh-3	line-height: 1.375;
lh-4	line-height: 1.5;
lh-5	line-height: 1.625;
lh-6	line-height: 2;

1

This example sets the line height to 1. The line height is equal to the font size, resulting in single spacing between lines.

The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm lh-1 p-4 rad-1 ta-c tc-lead">
    The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?
  </p>
</div>

2

This example sets the line height to 1.25. The line height is 1.25 times the font size, providing a bit of extra space between lines for improved readability.

The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm lh-2 p-4 rad-1 ta-c tc-lead">
    The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?
  </p>
</div>

3

This example sets the line height to 1.375. The line height is 1.375 times the font size, offering a comfortable amount of spacing between lines.

The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm lh-3 p-4 rad-1 ta-c tc-lead">
    The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?
  </p>
</div>

4

This example sets the line height to 1.5. The line height is 1.5 times the font size, which is commonly used for body text to enhance readability.

The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm lh-4 p-4 rad-1 ta-c tc-lead">
    The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?
  </p>
</div>

5

This example sets the line height to 1.625. The line height is 1.625 times the font size, providing a more spacious feel for the text.

The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm lh-5 p-4 rad-1 ta-c tc-lead">
    The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?
  </p>
</div>

6

This example sets the line height to 2. The line height is double the font size, creating a very open and airy layout for the text.

The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm lh-6 p-4 rad-1 ta-c tc-lead">
    The pike eats the owl and then lazes in the sun under the water. Who would eat a big pike?
  </p>
</div>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

You can combine responsive breakpoints like sm:lh-*,md:lh-*, lg:lh-*, and xxl:lh-* allows targeting specific utilities in different viewports.

<div class="lh-1 md:lh-2 ..."></div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

Alternatively, you can apply :hover by using h:lh-* utility to override elements and change their values when hovering over them.

<div class="lh-1 h:lh-2 ..."></div>