AFAIK, the best modern way to do it is `font-size: clamp(0.75rem, 1rem + 2vw, 3rem)` (the use of rem as well as vw is to not break zooming for accessibility)
AFAIK, the best modern way to do it is `font-size: clamp(0.75rem, 1rem + 2vw, 3rem)` (the use of rem as well as vw is to not break zooming for accessibility)
The thing that really made Grid sink in for me was seeing the pseudocode at Grid By Example [1], showing how each of the different constructs work.
[1]: https://gridbyexample.com
Jason Santa Maria's On Web Typography [2] originally included a "worked" example that you could put into a page and pull apart to start building similar things in your own projects. However, before it shipped, this section was dropped.
[2]: https://abookapart.com/products/on-web-typography
With calc and clamp now in the mix, it seems as if we no longer agree that 1rem=16px even if px is probably the most precise screen unit we have.
"Uh, pixels aren't responsive, so let's not even mention them."
It's not the end goal, but it feels like we're throwing away the map which could explain how to reach said goal.
Modern browsers handle zoom just fine, regardless of units. We use rem in case a user has set their own preferred base text size (the same reason we don't use viewport-relative units).