Responsively fitting text to full width of container
I want to create a title where the font size dynamically increases/decreases to fit the full width of the container, which also responds to changes in screen size.
After poking about on stackoverflow and not really finding a one size fits all solution, I'm wondering instead if there is a package for this?
Thanks a lot!
4 Replies
I would advice you to research responsive typography because
clamp() should not act as your one-trick pony. But here it is anyways https://fluid-typography.netlify.app/Fluid Typography
Create text that scales with the window size, so that your headings look great on any screen.
@Simon Thanks!
Container queries would work great for this
well or combo and do both
but use clamp with cq or w/e
Modern CSS Solutions
Container Query Units and Fluid Typography | Modern CSS Solutions
To learn more about the behaviors of container query units, we'll explore three fluid typography techniques applied via a "mixin" using custom properties. These upgraded methods will produce truly responsive typography, regardless of context.