v150 · CSS · Typography
Migration Diff
Four common patterns — viewport-unit sizing, clamp(), JavaScript resize loops, and horizontal transforms — compared against the native text-fit equivalent. Toggle between old and new in a live preview, resize each line, and see why the current grow and shrink values are simpler and more correct.
Checking
text-fit support...compatibility summary
| Old technique | Limitation | text-fit advantage |
|---|---|---|
| font-size: 5vw | Only accurate at one specific container/viewport ratio. Wrong for nested containers, sidebars, responsive grids. | text-fit: grow measures the actual line box instead of the viewport. |
| clamp(1rem, 4vw, 3rem) | Approximation. Requires hand-tuning per text string and container size, then still misses long translations. | text-fit: shrink only reduces overflowing text when it needs to fit. |
| JS resize loop | Runs after paint, causes layout shift, breaks SSR, and needs observers for every responsive container. | text-fit runs during layout, so the browser owns the measurement. |
| transform: scaleX() | Stretches glyphs horizontally, distorts letterforms, and leaves selection/accessibility geometry misleading. | text-fit: grow changes font size uniformly, so glyphs stay natural. |
see also
- API Console — inspect supported
text-fitvalues live - Banner Builder — edit copy and compare native fitting with the fallback path
- ChromeStatus entry
- CSS Text 4 text-fit property
- Explainer — css-fit-text