v150 · CSS · typography

Hero Editor

Type any headline — from a single word to a long sentence — and watch text-fit: grow expand short headlines or text-fit: shrink reduce oversized ones. Drag the width slider or try the presets to see it adapt without a JavaScript resize loop.

600px (drag to resize)

Ship faster.

Edit the text above to try your own headline.

mode: text-fit: grow width: 600px
Try: 
/* One rule — works for any text length, any container width */
.hero-headline {
  font-size: 1.5rem;   /* starting size */
  text-fit: grow;      /* scale short text up to the line box */
  white-space: nowrap; /* keeps text on one line */
}

/* Only shrink, never grow — good for fixed-height containers */
.card-title {
  font-size: 1.5rem;
  text-fit: shrink;
}

/* Graceful fallback for non-supporting browsers */
@supports not (text-fit: grow) {
  .hero-headline { font-size: clamp(1rem, 8vw, 5rem); }
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗