Poor Visual Hierarchy

When everything on the page screams for attention at the same volume, nothing gets heard. Here's how to create a clear visual pecking order.

What is this?

Imagine a newspaper where every article — front-page breaking news and the weather forecast — is printed in the same font size, same weight, same color. You'd have no idea where to look first. That's what poor visual hierarchy does to your website. Without clear differences in size, weight, color, and spacing, your visitors' eyes wander aimlessly instead of following the path you intended. The cat has seen pages where the footer copyright text is styled identically to the main headline, and frankly, it's offensive.

Why it matters

For your visitors: They land on your page and freeze. Nothing tells them "start here" or "this is important." Within 3-5 seconds, they've already decided your site is confusing and reached for the back button. People don't read websites — they scan. Without hierarchy, scanning fails completely.
For your business: Confused visitors don't convert. If your call-to-action button blends into the page like camouflage, nobody clicks it. Studies consistently show that clear visual hierarchy increases conversion rates by 20-30% because people can actually find what they're supposed to do.
The standard: Every page should have a clear visual ladder: one dominant element (usually your headline or hero), supporting elements (subheadings, key info), and quiet background elements (navigation, footer). The ratio between heading sizes should be at least 1.25x per level.

Clear visual ladder

h1 { font-size: 2.5rem; font-weight: 800; color: #fff; }
h2 { font-size: 1.75rem; font-weight: 700; color: #e5e5e5; }
h3 { font-size: 1.25rem; font-weight: 600; color: #a3a3a3; }
p  { font-size: 1rem; font-weight: 400; color: #a3a3a3; }

Everything looks the same

h1 { font-size: 1.1rem; font-weight: 500; color: #a3a3a3; }
h2 { font-size: 1rem; font-weight: 500; color: #a3a3a3; }
h3 { font-size: 1rem; font-weight: 400; color: #a3a3a3; }
p  { font-size: 1rem; font-weight: 400; color: #a3a3a3; }

How to fix it

React / Next.js

Create a consistent type scale and use it everywhere. Tailwind makes this easy:

export function HeroSection() {
  return (
    <section className="space-y-6">
      {/* Level 1: Dominant — big, bold, high contrast */}
      <h1 className="text-4xl font-extrabold tracking-tight text-white md:text-5xl">
        Ship faster with confidence
      </h1>

      {/* Level 2: Supporting — smaller, lighter */}
      <p className="max-w-2xl text-lg text-neutral-400">
        Get actionable UX feedback on your site in under a minute.
      </p>

      {/* Level 3: Action — visually distinct via color */}
      <button className="bg-amber-500 px-6 py-3 font-semibold text-black">Scan your site</button>
    </section>
  );
}

Plain HTML / CSS

/* Define a type scale — each step is ~1.25x bigger */
:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
}

/* Use size + weight + color together for hierarchy */
h1 {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: #ffffff;
}
h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #e5e5e5;
}
h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: #d4d4d4;
}
body {
  font-size: var(--text-base);
  font-weight: 400;
  color: #a3a3a3;
}

High impact — visualDesign~2 paws

This is the big one. Poor visual hierarchy tanks your entire visual design score because it's the foundation everything else sits on. Fix this first — the rest gets easier.

How the cat scores this

The scanner analyzes your page for distinct heading levels (h1 through h4) and checks whether each level has a meaningfully different font size and weight. It also looks at the contrast ratio between your primary text and secondary text — if they're too similar, that's a hierarchy failure. Pages with a single dominant heading and a clear size progression score highest.