Display/hero heading

Marketing hero for a fictional observability tool—big Syne, tight tracking, calm supporting line.

See every spike before it pages you

Trace-level latency, SLO burn, and deploy markers in one canvas—built for teams who outgrew their old dashboards.

Widely Supported

typographyherono-js

Quick implementation

.hero-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw + 0.5rem, 3.25rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.hero-sub {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 42ch;
}

Prompt this to your LLM

SaaS landing and campaign pages.

You are designing CSS for a product hero block.

Goal: Oversized display heading with fluid clamp sizing and a muted subtitle capped around 42ch.

Constraints:
- Use a bold display font stack; weight 800; tight line-height (~0.98).
- Negative letter-spacing for large sizes; subtitle stays readable.

Return HTML + CSS using CSS variables.

Why this matters in 2026

Heroes still sell the story in one glance; fluid type keeps the same visual weight from phone to ultrawide.

The logic

clamp() replaces dozens of media queries; pairing with negative tracking prevents display sizes from feeling airy.

Accessibility & performance

Let users zoom; avoid fixed pixel heights. Test contrast on gradient backgrounds.