CSS `text-grow` Property Prototyped in Chrome Canary 145

Chrome Prototyping text-grow for Flexible Text Fitting

A new CSS property, text-grow, is under development in Chrome Canary 145, offering a native solution to fit text within a container’s width. This prototyped feature aims to dynamically scale text to utilize available space, potentially replacing JavaScript-based solutions like FitText.js.

Why This Matters

Achieving fluid typography across varying screen sizes has traditionally required complex workarounds, often relying on JavaScript libraries or fragile CSS hacks. While responsive typography is a core principle of modern web design, consistently fitting text perfectly to a container without overflowing or leaving excessive whitespace has proven difficult. Current methods are often brittle and can impact performance, especially on complex layouts - developers spend significant time maintaining these solutions.

Key Insights

• Chrome Canary 145: First public prototype of the text-grow property.
• text-grow: per-line scale;: Adjusts text size to fit available space on each line.
• Accessibility Concerns: Ongoing discussion around preserving user-defined font size preferences.

Working Example

h1 {
  text-grow: per-line scale;
}

Practical Applications

• Marketing Websites: Dynamically adjusted headlines to maximize visual impact within available space.
• Pitfall: Over-reliance on text-grow without considering accessibility, potentially overriding user font size settings.

References:

• https://css-tricks.com/fit-width-text-in-1-line-of-css/