v150 · CSS · Typography

CSS fit-width text

The text-fit property scales a text element's font size so the text exactly fills its container's inline axis — text-fit: scale-down only shrinks, text-fit: balance also expands. No JavaScript, no vw hacks, no clamp() approximations.

concepts

  1. Headline Scaler

    A set of headlines at varying container widths — all using text-fit: scale-down to prevent overflow without a single media query or font-size calculation.

  2. Caption Fitter

    Image cards with captions of different lengths — text-fit: balance scales each caption to exactly span the card width, aligning the visual weight of text and image.

  3. Logo Lockup

    Brand name + tagline pair — text-fit: balance on the brand fills the container, text-fit: scale-down on the tagline prevents overflow. Drag the resize box or use the width slider to see both scale together.

  4. Pull Quote Scaler

    Editorial pull quotes that exactly fill their column — short quotes expand, long quotes scale down. Four quote lengths + a toggle let you compare text-fit: balance against a fixed font-size across any container width.

  5. Banner Builder

    Build a promotional banner where the headline responds to its container using the current text-fit property. Edit the copy, choose a theme, switch between grow, shrink, and none, then resize the preview to see native fitting or the labelled fallback path.

  6. API Console

    Mutate every text-fit input — value (none / scale-down / balance), base font size, container width, font family and weight, white-space — and inspect getComputedStyle() live. Feature-detection badges show which values Chrome supports in this build. Generates a copyable CSS snippet.

  7. Migration Diff

    Four old patterns (viewport units, clamp(), JavaScript fitText loops, transform: scaleX()) compared against text-fit. Toggle between old and new in a live resizable preview and read why the native approach is more accurate, causes no layout shift, and requires zero script.

why it shipped

Fitting text to a container has historically required JavaScript (measuring element widths, adjusting font-size in a loop) or rough approximations like font-size: 4vw or clamp() that only work for one specific breakpoint. The CSS text-fit property solves this natively: the browser measures the text, computes the exact scale factor, and applies it during layout — perfectly responsive with no script. scale-down only reduces the font size when text overflows (preventing truncation), while balance also expands short text to fill available space (useful for pull quotes and hero headings).

references