Fit-to-Width Text: A New Technique

Fit text is very much at the front of my mind at the moment. Those who attended my Smashing Workshop on scalable CSS will certainly attest to that.

In the workshop, we achieved it with this sorta rule:

font-size: var(--container-fill-text-size, max(15cqi, var(--size-step-10)));

This allows for progressive enhancement because a web component calculates --container-fill-text-size based on how many characters are in the text. If the web component doesn’t load, the fallback is the largest value of either 15cqi or var(--size-step-10), which is a fluid type scale value.

This is an example of the output from the web component.

<container-fill-text
  style="--container-fill-text-size: 17.9cqi;"
></container-fill-text>

Works a charm, but it requires a magic number to work at the moment, so I’m going to see if I can work Roman’s approach into that component. I’ll write it up if it works!

Advert