CSS text-grow

I found this article about text-grow which is currently behind a flag in Chrome and wanted to take an early look. See the implementation details for the current state of the feature.

Sample text

Lets take the following styled strapline as some sample text and use text-grow to see how it styles the text.

mainly web related notes, posts, whatever, by an average /seasoned/ web developer, mostly front, sometimes back

Using text-grow

For this text we will use the following style. Note there are more properties and values for fit-width text, see the implementation details.

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

Shows text with css text-grow styles applied resulting in a magazine-like pull quote with equal length lines but variable sized fonts.

mainly web related notes, posts, whatever, by an average /seasoned/ web developer, mostly front, sometimes back

A further example

Here I modified the post list from the home page to see what the headings would look like using text-grow. It certainly provides a very different feel but I guess needs to be used sparingly from a design perspective.

Shows a list of post titles styled with text-grow.

Conclusion

It might be some time and lots of changes before this drops but it will be worth the wait. I don’t know the terminology designers use but this kind of ‘magazine pull-quote’ styling can have a big impact on design, it looks great.

Keep an eye on progress…