Poor Line Spacing

What is this?

Remember writing school essays and shrinking the margins to cram everything onto one page? The text was technically all there, but reading it was miserable — lines blurred together, your eyes lost their place, and every paragraph felt like a wall of ink. That is exactly what tight line-height and excessive line length do on a website. The content exists, but your visitors' eyes physically cannot track through it comfortably.

Why it matters

• For your visitors: When lines of text are too close together, the eye struggles to jump from the end of one line back to the start of the next. People lose their place, re-read the same line, or just give up. Pair that with lines that stretch 120+ characters wide, and reading becomes an endurance sport. This affects everyone, but particularly people with dyslexia or visual impairments.
• For your business: Visitors who struggle to read your content do not stay long enough to be persuaded. If your landing page copy is technically great but physically exhausting to get through, your bounce rate tells the real story. The average visitor gives you about 15 seconds — do not waste those seconds making them squint.
• The standard: WCAG 1.4.12 recommends line spacing of at least 1.5 times the font size for body text. The optimal line length is 45-75 characters per line (around 65ch is the sweet spot). Paragraph spacing should be at least 2x the line spacing. These are not arbitrary numbers — they come from decades of typography and readability research.

article {
  max-width: 65ch;
  line-height: 1.7;
  font-size: 1.125rem;
}

article p {
  margin-bottom: 1.5em;
}

article {
  width: 100%;        /* Fills the entire screen */
  line-height: 1.1;   /* Lines practically touching */
  font-size: 16px;
}

article p {
  margin-bottom: 0.25em; /* Paragraphs barely separated */
}

How to fix it

React / Next.js

Use Tailwind's built-in spacing utilities. The key properties are leading-* (line-height), max-w-* (line length), and spacing between elements:

function BlogPost({ title, content }: { title: string; content: string }) {
  return (
    <article
      className="
        mx-auto max-w-prose
        text-lg leading-relaxed
        [&>p]:mb-6
        [&>h2]:mb-3 [&>h2]:mt-12 [&>h2]:text-2xl [&>h2]:font-bold [&>h2]:leading-tight
        [&>h3]:mb-2 [&>h3]:mt-8 [&>h3]:text-xl [&>h3]:font-semibold
        [&>ul]:mb-6 [&>ul]:list-disc [&>ul]:pl-6 [&>ul>li]:mb-2
        [&>blockquote]:mb-6 [&>blockquote]:border-l-4 [&>blockquote]:pl-4 [&>blockquote]:italic
      "
    >
      <h1 className="mb-6 text-3xl font-bold leading-tight">{title}</h1>
      {/* Render your content here */}
    </article>
  );
}

Key Tailwind shortcuts: leading-relaxed = 1.625 (recommended for body), leading-normal = 1.5 (minimum), and max-w-prose = 65ch (the perfect line length).

Plain HTML

<style>
  .content {
    /* Line length — the single biggest readability win */
    max-width: 65ch;
    margin: 0 auto;
    padding: 2rem 1rem;

    /* Line height — give lines room to breathe */
    font-size: 1.125rem;
    line-height: 1.7;
  }

  /* Paragraph spacing — at least 1em, ideally more */
  .content p {
    margin-bottom: 1.5em;
  }

  /* Headings can be tighter */
  .content h2 {
    line-height: 1.25;
    margin-top: 2.5em;
    margin-bottom: 0.75em;
  }

  /* Lists need breathing room too */
  .content li {
    margin-bottom: 0.5em;
  }
</style>

<article class="content">
  <h2>A readable heading</h2>
  <p>
    Body text with proper line height, comfortable line length, and generous paragraph spacing. Your
    eyes can actually track from one line to the next without losing their place.
  </p>
  <p>
    Each paragraph gets real breathing room, making the text feel approachable instead of
    overwhelming.
  </p>
</article>

How the cat scores this

The cat computes the line-height of all body text elements and flags anything below 1.4 as too tight. It measures line length by checking the rendered width of text containers — anything over 80 characters per line gets flagged, with the ideal being 45-75ch. The cat also checks paragraph spacing (margin between <p> elements) and flags when it is less than the line height, which makes paragraphs blur into each other visually.

Further reading

• Butterick's Practical Typography: Line Spacing — why 120-145% line-height is the sweet spot
• Baymard: Line Length Readability — research on optimal characters per line
• WCAG 1.4.12: Text Spacing — the accessibility standard for text spacing