Fit width text in 1 line of CSS

Danny discussed this a while back when looking at different approaches for fitting text to a container, spelling out the syntax (text-shrink included) that you can find in Roma Komarov’s explainer:

text-grow: <fit-target> <fit-method>? <length>?;
text-shrink: <fit-target> <fit-method>? <length>?;

• <fit-target>
  • per-line: For text-grow, lines of text shorter than the container will grow to fit it. For text-shrink, lines of text longer than the container will shrink to fit it.
  • consistent: For text-grow, the shortest line will grow to fit the container while all other lines grow by the same scaling factor. For text-shrink, the longest line will shrink to fit the container while all other lines shrink by the same scaling factor.
• <fit-method> (optional)
  • scale: Scale the glyphs instead of changing the font-size.
  • scale-inline: Scale the glyphs instead of changing the font-size, but only horizontally.
  • font-size: Grow or shrink the font size accordingly.
  • letter-spacing: The letter spacing will grow/shrink instead of the font-size.
• <length> (optional): The maximum font size for text-grow or minimum font size for text-shrink.

Notice the different fit methods — they either scale the glyphs or adjust the text’s actual font-size. So, naturally, the explainer notes that accessibility concerns are still being worked out. Like:

If an end-user tries to enlarge font size, UAs should not fit enlarged lines to the container width. Is minimum-font setting enough?

Speaking of open questions, Una Kravets highlights a few on Bluesky:

• Should the last line of a paragraph be scaled?
• Is the current line-height behavior as expected?
• Should it scale non-text parts such as inline images together?

You can contribute to the discussion in the GitHub issue, of course.

Donnie D’Amato wonders if, perhaps, this idea is better suited for print styles rather than screens. That’s an excellent use case I hadn’t thought of.

We sure have come a long way from the days of magic numbers and FitText.js!

Fit width text in 1 line of CSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.