← Back to all briefs
CSS50s read

Chrome 150 Ships text-fit: Headline Fitting Without JavaScript

Chrome 150 stable ships text-fit, which fits text to its container width in pure CSS and lets you drop FitText-style measurement JavaScript, though the spec stays a W3C draft with no Baseline support yet.

Chrome 150 stable landed June 30, and it brings text-fit, which scales a text node's font size so the text fills the width of its containing box. That's the CSS-native replacement for the FitText family of hacks: you delete the resize handler, the ResizeObserver loop, and the flash of a wrongly sized headline before the measurement fires. You declare the intent in the stylesheet, and the engine does the layout work.

The catch is support. The spec sits in the W3C css-text-5 draft, and Chrome ships text-fit Chromium-only with no Baseline status. Treat it as progressive enhancement: keep a sensible fallback font-size, apply text-fit where supported, and the page holds up in Firefox and Safari. Feature detection is one line of CSS.supports.

Chrome 150 carries more layout and interaction work. focusgroup gives you declarative arrow-key navigation and deletes the roving-tabindex state machine from your component code. zoom becomes animatable, so zoom transitions work in CSS. flex-wrap: balance evens out the last line of wrapped flex rows, and background-clip: border-area paints the background into the border box.

None of these are breaking changes; they are additive. Audit where you hand-roll text fitting and focus management, and cut the JavaScript that exists only to do what the engine now does.