Responsive font-size

Would it be possible to have responsive font-size along the lines of FlowType.js http://simplefocus.com/flowtype/ or equivalent

I often find myself having to make a transparent image with some text on it just to make it scalable. Of course this doesn’t work with dynamic Javascript generated text

Unless I’m missing a trick?

1 Like

you can make text scalable, when you use style=“font-size: 5vw” in innerHTML
example:

<div style="font-size: 2.5vw">this is text</div>
7 Likes

thanks, that seems to work

I'll tinker around with it

that’s useful, thanks

1 Like

Just capturing a refinement to this. Infinite scaling fonts can lead to illegible text on very small or very large screens. Support for clamp() has improved. So you can set a lower and upper limit to the scaling like this:

font-size: clamp(18px, 3vw, 26px);

Details on clamp() are available on MDN.

Not perfect support in all browsers: https://caniuse.com/?search=clamp

2 Likes