Lately, I’ve been working more with scalable (or fluid) typography in my projects. At a high level, it’s about letting text scale up and down with the viewport width, while still keeping it within reasonable sizes using clamp().
On a recent project for Waveshape (a GSAP-based portfolio called Forward, feel free to check it out in the designer) I decided to go with this approach.
I set up a base CSS variable that I call Fluid Base with a value of
clamp(0.65rem, 0.5rem + 0.5vw, 1.1rem)
I had to tweak and test a bit to find values that felt right. The middle value (0.5vw) lets the text scale with the viewport, while the min and max values keep things from getting too small or too large.
Everything else on the site builds on top of that base variable. The body text, for example, is set to:
calc(var(--fluid-base) * 0.95)
From there, the headings scale up proportionally. A mid-range display size (Display M) uses:
calc(var(--display--base) * 1.75)
and the largest Display XL uses:
calc(var(--display--base) * 3.5)
One thing to note is that fluid typography isn’t always a complete replacement for responsive typography. In many projects, you’ll still want to make adjustments at specific breakpoints.
In this case, though, this setup handled things well enough that I didn’t really need to change anything on other breakpoints.
