# Long Headlines Don't Get Display Size

**SHOULD** · **ID:** `aesthetics-impeccable-oversized-hero` · **Category:** aesthetics
**Source:** [impeccable](https://impeccable.style/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/aesthetics-impeccable-oversized-hero

> SHOULD: Reserve display size for short headlines — an `h1` is oversized only when ALL THREE hold: font-size >= 72px AND at least 40 characters AND >= 28% of viewport height (or >= 25% of viewport area). Keep the display size, cut the headline to its shortest true form, and let the full sentence live at 18–20px directly underneath.

Keep display type for short headlines and demote full sentences to the subhead so the fold stays usable

This is not an argument against big type. The detector requires ALL THREE conditions together: font-size >= 72px, at least 40 characters, and an h1 occupying >= 28% of viewport height (or >= 25% of viewport area). A punchy one- or two-word headline at 72px+ is completely fine — it is length PLUS viewport share that makes it a tell, because a 40+ character sentence at display size wraps to four or five lines and pushes the CTA, the product shot, and everything else below the fold. Keep the display size and cut the headline to its shortest true form, then let the full sentence live at 18–20px directly underneath, where sentences read.

## Bad — do not do this

`aesthetics-oversized-hero-bad`

```tsx
/**
 * A 1000x760 page rendered at 0.4 scale, so the type sizes below are real:
 * the h1 is genuinely 88px, and the dashed line is a genuine 600px fold.
 */
export function OversizedHeroBad() {
  return (
    <div className="w-full">
      <div className="relative w-[400px] max-w-full h-[304px] overflow-hidden rounded-lg border border-border bg-card">
        <div className="absolute top-0 left-0 w-[1000px] h-[760px] origin-top-left scale-[0.4] p-14">
          <nav className="flex items-center justify-between text-[16px] text-muted-foreground mb-10">
            <span className="font-semibold text-foreground">Relay</span>
            <span>Docs · Pricing · Log in</span>
          </nav>

          {/* 88px display size carrying a 90-character sentence */}
          <h1 className="text-[88px] leading-[1.05] font-semibold tracking-tight text-foreground">
            The complete platform for teams who want to ship reliable software much faster
          </h1>

          <button className="mt-10 rounded-lg bg-foreground px-8 py-4 text-[20px] font-medium text-background">
            Start building
          </button>
        </div>

        {/* Everything past 600px (= 240px at this scale) is below the fold */}
        <div className="absolute inset-x-0 top-[240px] bottom-0 bg-background/70 backdrop-grayscale border-t border-dashed border-error" />
        <span className="absolute top-[244px] right-2 text-[10px] font-medium text-error">
          fold — 600px
        </span>
      </div>
      <p className="text-xs text-error mt-4">
        All three detector conditions fire at once: 88px (&ge;72), 78 characters (&ge;40), and an h1
        that eats roughly 70% of viewport height (&ge;28%). The CTA is the entire point of the page
        and it has been pushed under the fold by the headline.
      </p>
    </div>
  );
}
```

## Good — do this

`aesthetics-oversized-hero-good`

```tsx
/**
 * Same 1000x760 page at 0.4 scale, same 600px fold, same 88px h1.
 * Only the headline's length changed — and with it, its viewport share.
 */
export function OversizedHeroGood() {
  return (
    <div className="w-full">
      <div className="relative w-[400px] max-w-full h-[304px] overflow-hidden rounded-lg border border-border bg-card">
        <div className="absolute top-0 left-0 w-[1000px] h-[760px] origin-top-left scale-[0.4] p-14">
          <nav className="flex items-center justify-between text-[16px] text-muted-foreground mb-10">
            <span className="font-semibold text-foreground">Relay</span>
            <span>Docs · Pricing · Log in</span>
          </nav>

          {/* Still 88px. Four words, so it is one line and roughly 15% of the viewport. */}
          <h1 className="text-[88px] leading-[1.05] font-semibold tracking-tight text-foreground">
            Ship software faster
          </h1>

          {/* The sentence survives — demoted to a 20px subhead, where sentences belong */}
          <p className="mt-6 max-w-[620px] text-[20px] leading-[1.5] text-muted-foreground">
            The complete platform for teams who want to ship reliable software much faster.
          </p>

          <button className="mt-8 rounded-lg bg-foreground px-8 py-4 text-[20px] font-medium text-background">
            Start building
          </button>
        </div>

        <div className="absolute inset-x-0 top-[240px] bottom-0 bg-background/70 backdrop-grayscale border-t border-dashed border-success" />
        <span className="absolute top-[244px] right-2 text-[10px] font-medium text-success">
          fold — 600px
        </span>
      </div>
      <p className="text-xs text-success mt-4">
        Display size is untouched — 88px is fine, and short headlines are exactly what it is for.
        Dropping to 20 characters takes the h1 to one line, and the sentence and the CTA both fit
        above the fold.
      </p>
    </div>
  );
}
```

## References

- [impeccable](https://impeccable.style/)
- [Type Scale](https://type-scale.com/)