I would be interested in having a CSS feature that would allow font to be sized relative to it’s container size.
There is quite a lot of interest in this:
- FitText.js, GitHub, 1,196 forks / 5,422 stars
- FlowType.JS, GitHub, 432 forks / 3,810 stars
- Font scaling based on width of container, StackOverflow, 147 points / 72 stars
vh can provide a certain workaround, relying on viewport size would not be sufficient for a relatively complex page.
Another thing is precision. Basic Kinetic Typography could be done with standard CSS animations if the text can be positioned precisely, taking exact vertical space (from top pixel of the text to bottom pixel).
This is a very rough description of an idea – I am pretty sure there are quite a lot of problems with it. But here is the basic thing:
font-size: fit-width | fit-height | fit-height-precise;
fit-height-precise would be ascent-to-descent (if I understand font terminology correctly) – basically from top pixel to bottom pixel.
How does this work with multiline text?
Not quite sure at the moment – any feedback?
One option is an additional constraint that would describe preferred line length.
How does this work with text-overflow?
Overflow would have to be ignored if this is set.
How does this work when calculating the container size?
Setting this property makes container ignore its text content when calculating it’s size.
How does it work when there are other elements in the container?
Not quite sure, but we could ignore the property in that case.
Shouldn’t we support percentage sizes relative to the container instead of 100% fit?
I would say it’s not worth it – it’s always possible to wrap in another element or use padding instead.