Experimenting with text-fit: native text autoscaling in CSS
The experimental CSS text-fit property: grow and shrink modes, fitting strategies and scaling limits.
Have you ever had to calculate font sizes with clamp() or media queries, or bring in JS libraries like FitText, just to make text fit perfectly inside a container? It looks like that may soon be a thing of the past.
Krijn Hoetmer has explored the experimental CSS text-fit property, filling gaps in documentation that is still incomplete.
Highlights from the breakdown:
- How it works: The property automatically adjusts text size to fit within its parent container.
- Main modes:
grow: enlarges text when there is free space in the container (starting from the basefont-size).shrink: reduces text when it hits the container boundaries and overflows.
- Scaling control: Different fitting strategies are supported: fit the whole block, fit line by line, or fit line by line with separate logic for the last line.
- Control limits: Minimum and maximum scaling thresholds can be set as percentages.
- An important detail:
text-fitaffects only visual rendering. The computedfont-sizevalue in the DOM stays unchanged, so size tracking and the CSS cascade do not break.
What about support? The feature is still experimental and available behind a flag starting with Chrome 150.
What do you think of the API? Were you waiting for a native FitText equivalent in the specification, or do clamp() and cqi already cover all your typography needs?