📏 Paragraph Spacing Guide

Proper paragraph spacing є fundamental для readability, visual comfort, та content comprehension. Correct vertical rhythm (spacing між paragraphs, line height, margins) makes text easier to scan, reduces eye strain, та improves reading speed by 20-30%. Для educational mushroom content з complex scientific descriptions, good typography separates amateur sites від professional knowledge resources. Цей guide охоплює line-height ratios, paragraph margins, vertical rhythm systems, та responsive adjustments.

📐 The Golden Rules

1. Line Height (Leading)

Optimal ratio: 1.5 - 1.7 для body text

  • 16px font: 24-27px line-height
  • 18px font: 27-31px line-height
  • Headings: 1.2 - 1.3 (tighter)

line-height: 1.7;

2. Paragraph Margins

Between paragraphs: 1.0-1.5em

  • Equals 1-1.5x font size
  • Creates visual separation
  • Maintains vertical rhythm

margin: 1.25em 0;

3. Line Length (Measure)

Optimal: 50-75 characters

  • Too short (<45): Choppy reading
  • Too long (>90): Eye fatigue, lose place
  • Solution: Max-width або columns

max-width: 70ch;

4. Vertical Rhythm

Consistent spacing units

  • Base unit: line-height (e.g., 1.5em)
  • All margins multiple of base
  • Creates visual harmony

--baseline: 1.5em;

👁️ Visual Comparison

❌ Bad Spacing

Psilocybe cubensis, також known як Golden Teacher, є найпопулярнішим species для cultivation. Це beginner-friendly mushroom grows well у controlled environments.

Temperature requirements: 75-81°F (24-27°C). Relative humidity should maintain 90-95% during fruiting stage. Light cycle: 12 hours on, 12 hours off.

Typical yields: 2-4 flushes з properly prepared substrate. First flush generally most productive.

Issues: Cramped, hard to scan, low readability

✅ Good Spacing

Psilocybe cubensis, також known як Golden Teacher, є найпопулярнішим species для cultivation. Це beginner-friendly mushroom grows well у controlled environments.

Temperature requirements: 75-81°F (24-27°C). Relative humidity should maintain 90-95% during fruiting stage. Light cycle: 12 hours on, 12 hours off.

Typical yields: 2-4 flushes з properly prepared substrate. First flush generally most productive.

Benefits: Easy to scan, comfortable reading, professional

💻 CSS Implementation

1. Basic Paragraph Spacing:

/* Body text defaults */
body {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 18px; /* Base size */
  line-height: 1.7; /* 1.7x base = 30.6px */
  color: #2c3e50;
}

/* Paragraph spacing */
p {
  margin: 1.25em 0; /* Top & bottom */
  max-width: 70ch; /* Optimal line length */
}

/* First paragraph (no top margin) */
p:first-child {
  margin-top: 0;
}

/* Last paragraph (no bottom margin) */
p:last-child {
  margin-bottom: 0;
}

2. Vertical Rhythm System:

/* CSS Custom Properties для consistent spacing */
:root {
  /* Typography */
  --font-size-base: 18px;
  --line-height-base: 1.7;