As designers, it makes sense to think about what space is available in the browser, and adjust your typography accordingly. It’s also important to remember that different users will have different font-size needs – and the more a font size is responsive to the viewport, the less responsive it will be to user inputs.
I spent much of 2025 on this blog digging into font-sizing and responsive/fluid typography, and it has changed the way I approach sizing text on the web. Feel free to read (and watch the videos) back through my process if you’re interested in the details – but this article on the web.dev blog provides a quick summary of my current approach.
I found that graphing various relationships helped me understand better how all the parts interact. I may do a follow-up post here exploring and explaining this chart in more detail:
calc(16px + 2.5vw).
You can adjust the values
and add clamp() ranges to
the graph on Desmos.
This is really two graphs overlaid,
using the same horizontal axis
(viewport width in pixels)
but a different vertical axis.
Near the bottom, in px units,
the base and zoomed font-size at different viewport widths,
and a line showing that 2× font-size
grows at a much steeper pace than 200% zoom.
Above, in % units,
we can see the effectiveness of various zoom values,
and the zoom required to achieve a 2× font-size.
Hopefully I got the math right, but let me know if I’ve missed something.
clamp() approach)pow()
We don’t have to choose between px and rem for spacing
There are many articles and established CSS best-practices that rely on determining the correct or best units to use. Now that comparison functions are well supported in CSS, we don’t have to choose.
What do all the numbers in our clamp() do?
There are multiple tools that can help create a fluid font-size calculation for CSS – generally expressed as a clamp() function combining em (or rem) with vw (or vi) units. But the results are difficult to understand at a glance, so I wanted to visualize what’s going on…
Using modern CSS units and math functions
When I tried setting my browser font-size preferences, I found it broke more sites than it improved, and I quickly moved back to the default. So what went wrong, and how can we fix it?