Responsive heading

Long headline for a climate piece—resize the window: type grows smoothly without media-query stair steps.

Rivers are rewiring faster than our maps

Field hydrologists now rely on lidar flyovers weekly; this essay walks through what changed after the 2025 melt.

Widely Supported

typographyclampno-js

Quick implementation

.article-title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.8vw + 0.6rem, 2.4rem);
  line-height: clamp(1.1, 0.2vw + 1.05, 1.2);
  letter-spacing: -0.03em;
}

Prompt this to your LLM

Editorial templates and blogs.

You are defining a single responsive article title class.

Goal: Fluid font-size with clamp; fluid line-height with clamp; cap width around 18ch for long headlines.

Constraints:
- No media queries.
- Display font, weight 800, slight negative tracking.

Return CSS for .article-title.

Why this matters in 2026

Readers bounce between breakpoints constantly; continuous scaling feels more intentional than three fixed steps.

The logic

ch units approximate character width for headline measure; clamp on line-height keeps ascenders from crashing on small screens.

Accessibility & performance

Respect user font size settings; avoid locking line-height to a single px value.