Fluid clamp() calculator

One line of CSS instead of a stack of media queries. The output is in rem against a 16px root, so it still scales when a user bumps their browser's font size.

Size at small screens

Size at large screens

Small viewport

Large viewport

font-size: clamp(1.125rem, 1.547vw + 0.7624rem, 2rem);

Reads as: never smaller than 18px, never larger than 32px, and between the two viewports it grows at 1.547% of the viewport width. Works for padding, gaps and margins the same way as font-size.