Lesson 19: Text Spacing in CSS

Master text spacing with CSS properties for line height, letter spacing, and word spacing. Create professional typography with precise spacing control.

Start Learning

Line Height

The line-height property controls the vertical spacing between lines of text. This crucial property affects readability and visual appeal of text blocks.

Values: Normal (1.2), unitless numbers (1.5), pixels (24px), em (1.5em), rem (1.5rem), percentages (150%)
Recommended: Unitless values (1.5-1.8) for optimal scalability and accessibility
Use Cases: Paragraph readability, code blocks, long-form content, UI text elements

Line Height Examples

Compact (1.2)

This paragraph has a line-height of 1.2. This tighter spacing is often used for headings, captions, or UI elements where space is limited. Notice how the lines are closer together, which can improve density but may reduce readability in longer texts.

Standard (1.5)

This paragraph has a line-height of 1.5. This is considered the ideal spacing for body text as it balances density with readability. The extra space between lines helps guide the eye from one line to the next without creating excessive gaps.

Loose (2.0)

This paragraph has a line-height of 2.0. This spacious approach is often used for poetry, pull quotes, or accessibility-focused designs. The generous spacing improves readability for users with visual impairments or dyslexia but reduces content density.

Visual guide showing line spacing. The red line represents the baseline of the text above, while the blue line shows the baseline of the text below. The distance between these lines is controlled by the line-height property.

/* CSS for line height */
.compact {
  line-height: 1.2;
}

.standard {
  line-height: 1.5;
}

.loose {
  line-height: 2.0;
}

/* Using unitless values is recommended for accessibility */
.accessible-text {
  line-height: 1.6;
}

Real-World Application: Article Layout

The Importance of Line Spacing

By Typography Expert

Line spacing plays a crucial role in readability. Studies show that optimal line height can improve reading speed by up to 20%. For body text, a line-height of 1.5 to 1.8 times the font size is recommended.

In digital interfaces, slightly more spacing (1.6-1.8) often works better than in print. This compensates for screen glare and varied viewing conditions. For mobile devices, increasing line-height can significantly improve readability on smaller screens.

Accessibility Tip

For users with dyslexia or visual impairments, increasing line-height to 2.0 can dramatically improve readability. This extra spacing helps prevent line-skipping and reduces visual crowding.

Letter Spacing

The letter-spacing property controls the horizontal spacing between characters. This property can enhance readability or create stylistic effects.

Values: Normal, pixels (2px), em (0.1em), rem (0.1rem)
Negative Values: Create tighter letter spacing (tracking)
Use Cases: Headings, uppercase text, logos, improving readability for small fonts

Letter Spacing Examples

Tight Spacing (-0.05em)

This text has negative letter spacing. Tighter spacing is often used for bold headlines or logos to create impact. Be cautious as too little spacing can reduce readability, especially at smaller sizes.

Normal Spacing (default)

This text uses the browser's default letter spacing. Most fonts are designed with optimal spacing for readability at common sizes. For body text, default spacing usually provides the best readability.

Increased Spacing (0.1em)

This text has increased letter spacing. Slight spacing increases can improve readability for small text, uppercase text, or light-weight fonts. This technique is often used in captions, labels, and navigation menus.

Wide Spacing (0.3em)

This text has wide letter spacing. This stylistic choice creates a distinctive look for headings, logos, or decorative text. Use sparingly as it significantly reduces reading efficiency for longer text.

Visual guide showing letter spacing. The background grid helps visualize the space between characters. Each vertical line represents a potential character position.

/* CSS for letter spacing */
.tight-spacing {
  letter-spacing: -0.05em;
}

.normal-spacing {
  letter-spacing: normal; /* Default value */
}

.increased-spacing {
  letter-spacing: 0.1em;
}

.wide-spacing {
  letter-spacing: 0.3em;
}

/* For uppercase text */
.uppercase-text {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

Real-World Application: Navigation Menu

Default Spacing

Home | Products | Services | About | Contact

Improved Spacing

Home | Products | Services | About | Contact

Slight letter spacing improves scanability

Design Tip

When using all-caps text, increase letter spacing by 0.05em to 0.1em. This compensates for the loss of word shape cues that lowercase letters provide, improving readability.

Word Spacing

The word-spacing property controls the horizontal spacing between words. This property can improve readability or create specific stylistic effects.

Values: Normal, pixels (5px), em (0.25em), rem (0.25rem)
Negative Values: Reduce space between words (use cautiously)
Use Cases: Justified text, headings, improving readability for narrow columns

Word Spacing Examples

Tight Spacing (-1px)

This text has reduced word spacing. While occasionally used for stylistic effect in headlines, tight word spacing generally reduces readability. Avoid in body text as it can cause words to visually merge.

Normal Spacing (default)

This text uses the browser's default word spacing. For most fonts and languages, the default spacing provides good readability. The space between words is typically around 0.25em.

Increased Spacing (5px)

This text has increased word spacing. Moderate increases can improve readability in justified text blocks or for users with visual impairments. Too much spacing creates "rivers" of white space that disrupt reading flow.

Wide Spacing (15px)

This text has wide word spacing. This stylistic choice creates a distinctive look but significantly reduces reading efficiency. Use only for short decorative text elements like logos or artistic headings.

Visual guide showing word spacing. The background grid helps visualize the space between words. Each major vertical line represents a potential word boundary.

/* CSS for word spacing */
.tight-words {
  word-spacing: -1px;
}

.normal-words {
  word-spacing: normal; /* Default value */
}

.increased-words {
  word-spacing: 5px;
}

.wide-words {
  word-spacing: 15px;
}

/* For justified text */
.justified-text {
  text-align: justify;
  word-spacing: 0.1em; /* Helps prevent awkward gaps */
}

Real-World Application: Newspaper Layout

Without Adjustment

This paragraph demonstrates justified text without word spacing adjustment. Notice how uneven gaps can appear between words, creating distracting "rivers" of white space that run through the text block.

With Word Spacing

This paragraph shows justified text with slight word spacing adjustment. By increasing word spacing slightly, the text justification appears more even, with fewer large gaps between words.

Typography Tip

For justified text in multi-column layouts, combine word-spacing: 0.05em with hyphens: auto to create more even spacing without awkward gaps between words.

Interactive Text Spacing Demo

Experiment with text spacing properties and see the results in real-time:

This is a demonstration of text spacing properties. You can adjust the line height, letter spacing, and word spacing using the controls above. Observe how each property affects readability and visual appearance. Good spacing creates harmony between text elements, improves readability, and enhances user experience.

.demo-text {
  line-height: 1.5;
  letter-spacing: 0em;
  word-spacing: 0em;
}

Best Practices for Text Spacing

Optimal Line Height

For body text, use line-height between 1.5 and 1.8. For headings, slightly less (1.2-1.4) often works well. Increase line height for longer lines of text and for accessibility needs.

Letter Spacing Guidelines

Use subtle letter spacing adjustments (0.02em to 0.1em) for uppercase text, small fonts, or light-weight fonts. Avoid negative letter spacing in body text. For decorative purposes, use sparingly.

Word Spacing Tips

Maintain default word spacing for body text. For justified text, slight increases (0.05em) can prevent awkward gaps. Never use negative word spacing in paragraphs. For headings, minor adjustments can improve visual balance.

Advanced Techniques

Combine text spacing properties with other CSS features for sophisticated typography:

Combining Spacing Properties

/* Advanced text spacing */
.advanced-spacing {
  /* Optimal line height for readability */
  line-height: 1.6;
  
  /* Slight letter spacing for uppercase */
  letter-spacing: 0.05em;
  
  /* Default word spacing */
  word-spacing: normal;
  
  /* Additional properties for enhanced typography */
  font-size: 1.1rem;
  max-width: 65ch; /* Optimal line length */
  margin: 0 auto; /* Center block */
  text-align: justify;
  hyphens: auto; /* Automatic hyphenation */
}

Real-World Application: Editorial Design

TYPOGRAPHY HARMONY

Balancing Spacing in Editorial Design

In editorial design, text spacing creates the rhythm of the page. Proper line height establishes vertical rhythm, while consistent letter and word spacing create horizontal harmony. Design systems often establish spacing ratios that scale with font size.

"Good typography is invisible; great typography is transparent."

The combination of line-height, letter-spacing, and word-spacing creates typographic color - the overall density and texture of the text block. Consistent typographic color across a document creates visual harmony and improves reading comfort. For digital publications, responsive spacing adjustments ensure optimal readability across devices.

Responsive Spacing

For responsive designs, adjust text spacing at different breakpoints. On mobile devices, increase line-height by 0.1-0.2 and consider slightly increasing letter-spacing for small screens. Use relative units (em, rem) for spacing properties to ensure they scale with font size.

Next Steps

Now that you understand text spacing, continue to the next lesson to learn about creating drop caps and other advanced typography effects.

Previous Lesson: Text Positioning Next Lesson: Drop Cap