Chapter 11: Advanced Text Layout & Paragraph Styling

While font family and size set the foundation, the true quality of a design often lies in the details of text layout. This chapter dives deep into how paragraphs are aligned, how spacing creates rhythm, and how decorations add visual meaning. You will learn to move beyond simple defaults to create professional, highly readable editorial layouts.

1. Precision Alignment and Justification

Text alignment controls how text flows within its container. While left is the default for most languages, other values provide different visual tones.

Horizontal Alignment

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

Justification is powerful but dangerous. It stretches lines so that every line has the same width. This can create "rivers of white space" which hurt readability. To fix this, modern CSS provides text-justify and hyphenation.

.editorial-body {
  text-align: justify;
  text-justify: inter-word; /* Distributes space between words */
  hyphens: auto;            /* Breaks long words to prevent large gaps */
}

2. Spacing: The Rhythm of Reading

Spacing is the "breath" between characters and words. Small adjustments can drastically change the "color" or density of a block of text.

Letter Spacing (letter-spacing): Often used for all-caps headings to increase elegance.
Word Spacing (word-spacing): Adjusts the gap between words.
Vertical Spacing (margin / padding): Controls the distance between paragraphs.

.classic-caps {
  text-transform: uppercase;
  letter-spacing: 0.2em; /* Spaced out for high-end feel */
  word-spacing: 0.1em;
}

p {
  margin-block-end: 1.5rem; /* Consistent rhythm between paragraphs */
}

3. Paragraph Styling: First Letters and Indents

In traditional typography, the start of a chapter or section is often highlighted with a Drop Cap or a specific indentation.

Drop Caps with `::first-letter`

.intro-text::first-letter {
  float: left;
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 900;
  margin-inline-end: 0.5rem;
  color: #1d4ed8;
}

Paragraph Indentation

/* Indent every paragraph except the first one in a section */
p + p {
  text-indent: 2em;
  margin-block-end: 0;
}

4. Advanced Decorations

Text decorations go beyond the simple underline. Modern CSS allows you to control the thickness, style, and offset of these lines.

.premium-link {
  text-decoration: underline;
  text-decoration-color: #2563eb;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.strike-price {
  text-decoration: line-through;
  color: #94a3b8;
}

5. Text Emphasis and Shadows

Emphasis marks are useful for specific languages but can be used creatively. Text shadows create depth or "glow" effects.

.title-glow {
  text-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
  font-weight: 800;
}

.retro-shadow {
  text-shadow: 2px 2px 0px #cbd5e1;
}

6. Practical Editorial Style

.article-body {
  max-width: 65ch;
  margin: 0 auto;
  font-family: serif;
  font-size: 1.125rem;
  line-height: 1.7;
}

.article-body h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.article-body p:first-of-type {
  font-size: 1.25rem;
  color: #475569;
}

7. Debugging Checklist

Is text-align: justify creating "rivers" on mobile? (Use hyphens!)
Does the line-height feel too cramped for long paragraphs?
Is letter-spacing making the text unreadable?
Are ::first-letter styles breaking the vertical alignment?
Is the text-shadow too heavy, making the text look blurry?

Advanced Text Layout & Paragraph Styling