https://clamp.font-size.app/ or https://royalfig.github.io/fluid-typography-calculator/ to calculate units you may be used to.
Note that each step represents a different general size, with the values adjusting dynamically as the viewport width changes (vw stands for viewport width). For text, 0.9158rem + 0.1087vw allows the font size to grow as the viewport increases, ensuring the text remains proportionate and accessible across various devices.
Beyond text, note that the steps can be applied to padding, margins, or gaps, so your grid can shrink along with the text for more readability.
This is more elegant than using media queries, which seem more arbitrary as we browse the web on different screen sizes (fold-out displays, anyone?). If done consistently, this method should look proportional regardless of the screen.
It also doesn’t cause a “jump” in font size on a laptop or desktop screen as you resize the browser and hit a specific breakpoint—fluidity looks much more polished.
By sizing this way and using fluid grids with min-width()
, I could reduce most of my designs just to include a single media query (when a menu would change into a menu list for small screens).
Try it out on this site! Since it’s a straightforward design, the change is subtle, but try this out on a beautiful site like https://chriskirknielsen.com , and you’ll see the impressive results.