Text Formatting in CSS: Line Height, Text Alignment, and Spacing

Live editor for all the examples will be added soon.

Formatting text in CSS is essential for creating clean, readable, and visually appealing designs. Proper text formatting ensures that your content is legible and well-organized, improving user experience. In this guide, we will explore three key text formatting properties in CSS: line height, text alignment, and spacing (letter and word spacing).

1. Line Height

What is Line Height?

The line-height property controls the amount of space between lines of text. By adjusting the line height, you can make your text more readable by giving it extra vertical space.

Syntax:

line-height: value;

The value can be set in various units:

  • Number: Multiplies the font size (e.g., 1.5 will be 1.5 times the font size).
  • Percentage: A percentage of the element’s font size (e.g., 150%).
  • Length: A fixed height (e.g., 20px, 1.5em).

Example (Using Number):

p {
  font-size: 16px;
  line-height: 1.5; /* 1.5 times the font size */
}

In this example, the line height is 1.5 times the font size, which increases the space between lines of text within the <p> element.

Example (Using Length):

h1 {
  font-size: 24px;
  line-height: 32px;
}

In this example, the line height for the heading is set to exactly 32px, which gives a fixed amount of space between lines of text in the heading.

Why Use Line Height?

Adjusting line height improves readability, especially for blocks of text. If the lines are too close together, the text can feel cramped. If they’re too far apart, it can disrupt the flow of reading.

Pros:

  • Enhances readability by adjusting space between lines.
  • Improves visual balance, especially for longer paragraphs or headings.

Cons:

  • Too much line height can make text look disjointed.
  • Using fixed values (e.g., px or em) may not be flexible across different screen sizes.

Example of Adjusting Line Height:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line Height Example</title>
  <style>
    p {
      font-size: 16px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <p>This paragraph has a line height of 1.8 times the font size, making it easier to read by increasing the space between lines of text.</p>
</body>
</html>

2. Text Alignment

What is Text Alignment?

The text-align property controls the horizontal alignment of text within an element. You can align text to the left, right, center, or justify it so that the text spans the full width of its container.

Syntax:

text-align: alignment;

Possible values:

  • left: Aligns text to the left (default in left-to-right languages).
  • right: Aligns text to the right.
  • center: Centers the text.
  • justify: Stretches the text so that it fits the full width of the container.

Example (Align Left):

p {
  text-align: left;
}

This aligns the text in the paragraph to the left side of its container, which is the default behavior in most cases.

Example (Align Center):

h1 {
  text-align: center;
}

This centers the text in the heading.

Example (Justify):

div {
  text-align: justify;
}

The justify value ensures that both sides of the text are aligned with the edges of the container, adding equal space between words.

Pros:

  • Makes the layout visually balanced by adjusting how text aligns within containers.
  • justify creates a more formal, newspaper-like look by aligning text on both the left and right.

Cons:

  • Justified text can create uneven spacing between words, especially for shorter lines.

Example of Text Alignment:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Alignment Example</title>
  <style>
    h1 {
      text-align: center;
    }

    p {
      text-align: justify;
    }
  </style>
</head>
<body>
  <h1>This heading is centered</h1>
  <p>This paragraph is justified. The text stretches to fill the entire width of its container, creating a clean look with straight edges on both sides of the paragraph.</p>
</body>
</html>

3. Spacing (Letter and Word Spacing)

Letter Spacing

The letter-spacing property controls the space between characters in a block of text. Increasing the letter spacing can make text easier to read, while decreasing it can create a tighter, more compact appearance.

Syntax:

letter-spacing: value;

The value can be:

  • Length: A fixed space between letters (e.g., 2px, 0.1em).

Example (Letter Spacing):

h1 {
  letter-spacing: 2px;
}

This adds 2px of space between each letter in the <h1> element, which can make the heading more distinct.

Word Spacing

The word-spacing property controls the space between words in a block of text. It works similarly to letter spacing, but adjusts the space between entire words instead of individual letters.

Syntax:

word-spacing: value;

The value can be:

  • Length: A fixed space between words (e.g., 4px, 0.2em).

Example (Word Spacing):

p {
  word-spacing: 5px;
}

This adds 5px of space between words in the <p> element, creating more separation between them.

When to Use Letter and Word Spacing:

  • Letter Spacing: Helps improve readability for all-caps text or large headings.
  • Word Spacing: Useful for creating a cleaner layout, especially in justified text, to prevent words from being too close together.

Pros:

  • Enhances readability and improves the visual appearance of text.
  • Useful for typographic designs that require precise control over spacing.

Cons:

  • Too much spacing can make text hard to read or break the flow.

Example of Letter and Word Spacing:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Letter and Word Spacing Example</title>
  <style>
    h1 {
      letter-spacing: 3px;
    }

    p {
      word-spacing: 5px;
    }
  </style>
</head>
<body>
  <h1>Letter Spacing Example</h1>
  <p>This paragraph demonstrates word spacing. The words have additional space between them, making the text more spread out and easier to read.</p>
</body>
</html>

4. Combining Line Height, Text Alignment, and Spacing

By combining these properties, you can create well-formatted, clean, and legible text layouts. These properties give you control over how text looks and how users will experience reading content on your site.

Example Combining All Properties:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Formatting Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    h1 {
      text-align: center;
      letter-spacing: 4px;
    }

    p {
      text-align: justify;
      word-spacing: 4px;
    }
  </style>
</head>
<body>
  <h1>Formatted Heading</h1>
  <p>This paragraph demonstrates the combination of line height, text alignment, and word spacing. The line height is set to 1.6, making the text easier to read. The text is justified, ensuring that both sides of the paragraph align with the edges of the container. Finally, word spacing is increased to create more space between words.</p>
</body>
</html>

Explanation:

  • Line height ensures there’s enough space between the lines in the paragraph.
  • Text alignment centers the heading and justifies the paragraph text.
  • Letter spacing adds extra space between letters in the heading, making it more visually appealing.
  • Word spacing spreads out the words in the paragraph for improved readability.

Conclusion

Proper text formatting in CSS is essential for improving readability and creating visually appealing web pages. The line-height, text-align, and spacing properties allow you to control how text is displayed, giving you the ability to create clean, professional designs. By mastering these properties, you’ll ensure that your website’s text is easy to read, well-spaced, and visually balanced.