PEN BEAM / COPY-READY EXAMPLE
Responsive Fluid Typography with clamp()
Let headings scale smoothly between readable minimum and maximum sizes without multiple viewport breakpoints.
What this snippet does
Defines a fluid heading size that scales between a minimum and maximum without requiring multiple media queries.
CSS / source code
/* Apply this class to a heading that should scale with the viewport. */
.fluid-heading {
font-size: clamp(2rem, 1.2rem + 3vw, 4.25rem);
line-height: 1.08;
letter-spacing: -0.035em;
max-width: 18ch;
text-wrap: balance;
}
Where to place it
Add the rule to the theme stylesheet or a scoped custom CSS area. Replace `.fluid-heading` with a component class in your project; avoid targeting all headings globally without checking their hierarchy.
Back up the relevant file or settings first. Apply the change on staging, verify behavior, and retain a rollback path before production deployment.
What to check before deploying
- Test at 320px, 768px and 1440px and check intermediate widths too.
- Ensure headings do not overflow with long words, translated text or browser zoom; keep body copy at a comfortable readable size.
- Check line length on large screens and confirm the min/max sizes work with the chosen font and page hierarchy.