CSS Text Spacing: Line Height, Letter Spacing, and Spacing Properties

Master CSS text spacing. Learn how to control line heights, adjust letter and word spacing, implement indentations, and manage white space wrap settings.

Introduction

Great typography is as much about the space between characters as it is about the shape of the letters themselves. If lines of text are packed too closely, reading becomes exhausting. If words are spread too far apart, the eye struggles to track from the end of one line to the start of the next.

In CSS, we manage this layout using Text Spacing Properties. By configuring line heights, adjusting horizontal spacing between letters and words, adding paragraph indents, and managing how browsers wrap whitespaces, you can optimize your reading experiences across various devices.

What You Will Learn

  • How to configure readable vertical line spacing using line-height.
  • Why unitless values are preferred for line height scaling.
  • Adjusting horizontal letter tracking (letter-spacing) and word spacing (word-spacing).
  • Indenting paragraphs with text-indent.
  • Controlling layout wrap states using the white-space property.

Prerequisites

Detailed Explanation: Text Spacing Properties

Let's explore the properties that control text layout spacing:

1. Line Height (line-height)

Defines the vertical height allocated to a line of text. It controls the space above and below the characters:

  • Unitless values (Recommended): E.g., 1.5. The browser calculates the height relative to the current element font size. If font-size is 16px, a line height of 1.5 equals $1.5 \times 16 = 24\text{px}$.
  • Fixed units: E.g., 24px or 1.5rem.
  • Percentage: E.g., 150%.

> [!TIP] > Use Unitless Values: Always prefer unitless numbers (like line-height: 1.5;). If you define a fixed unit (like line-height: 24px; on a parent), and a child element inherits it but increases its font-size to 32px, the text lines will overlap and collide. Unitless line heights scale dynamically with the child font size.

2. Letter Spacing (letter-spacing)

Controls the horizontal gap between characters (known in design as tracking).

  • normal: Default browser letter spacing.
  • Relative values (px, em): E.g., 0.05em or 1px.
  • Use Case: Increase spacing for all-caps headings to make them look premium and legible. Decreasing spacing slightly (e.g., -0.02em) is common for massive hero headers.
h1 {
  font-size: 3rem;
  letter-spacing: -0.02em; /* Tighter layout for headings */
}

3. Word Spacing (word-spacing)

Adjusts the horizontal gap between words.

  • normal: Default spacing.
  • Relative values: E.g., 0.25em or 4px.
  • Note: Rare in body copy, but useful for stylized layouts or poetry formats.

4. Text Indent (text-indent)

Specifies the indentation of the first line of text in a block-level container.

  • Values: E.g., 2rem, 30px, or 5%.
  • Use Case: Traditional book layout styles.

5. White Space (white-space)

Determines how the browser processes spaces, tabs, and line breaks in the HTML code:

  • normal: Collapses consecutive spaces into a single space and wraps text automatically when it reaches the container boundary.
  • nowrap: Collapses spaces but prevents text from wrapping onto a new line. The text will overflow its container if it is too long.
  • pre: Preserves all whitespace and line breaks exactly as written in the source code (similar to a <pre> HTML tag).

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Line Height Comparison
    Line1[line-height: 1.0 <br> Text lines packed tight <br> Very difficult to read]
    Line2[line-height: 1.6 <br> Perfect breathing room <br> Optimal readability]
    end

Code Examples

Example 1: Creating a High-Readability Blog Layout

Apply optimal vertical and horizontal spacing rules to long-form blog paragraphs:

.blog-post {
  max-width: 650px;       /* Limit line length for comfortable reading */
  margin: 0 auto;
}

.blog-post p {
  font-family: 'Georgia', serif;
  font-size: 1.125rem;    /* 18px */
  
  /* 1.6 unitless height gives perfect reading track */
  line-height: 1.6;       
  
  /* Add breathing room between letters */
  letter-spacing: 0.01em; 
  
  margin-bottom: 1.5rem;
}

Example 2: Styling a Premium Navigation Header

Make navigation links look sharp and clean:

.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;    /* 14px */
  text-transform: uppercase;
  font-weight: 600;
  
  /* Increase tracking for uppercase text */
  letter-spacing: 0.1em;  
  
  /* Prevent link text wrapping to a new line */
  white-space: nowrap;    
}

Best Practices & Common Mistakes

  • Contrast and Line Length: Do not let lines of body text grow wider than 80 characters (around 500-700px). If line length is too long, readers will get lost when moving to the next line.
  • Headings vs. Body Spacing: Headings (h1, h2) have larger fonts and require tighter line heights (around 1.2). Body text requires looser line heights (1.5 to 1.8) to avoid character collisions.

FAQs

Q: Why does my text overflow the container when using white-space: nowrap? A: nowrap explicitly tells the browser not to start a new line. To contain this overflow, combine it with layout parameters like overflow: hidden; and text-overflow: ellipsis;.

Q: Can I use negative values for letter spacing? A: Yes! Negative letter-spacing (e.g. -0.03em) is often used on large, heavy display titles to make them feel more cohesive and compact.

Summary

Text spacing properties control the visual flow of copy. While line-height handles vertical spacing (preferring unitless scale factors), letter-spacing and word-spacing adjust horizontal gaps. Additionally, text-indent manages first-line indentation, and white-space controls wrapping rules.

Related Articles

Next Tutorial

How do we align text blocks and manage vertical offsets within containers? Let's check: Text Alignment.

← Back to Syllabus