Last issue we talked about a few tips for responsive design.
Today, I want to carry on that theme by talking about font sizes — but how does that relate to responsive design?
Well, when you’re laying out a webpage, you natively have 3 different breakpoints at which your website will alter it’s appearance to fit — for desktop, tablet and mobile.
Most commonly, you’ll find that most designers and/or developers will setup their font sizes per breakpoint. This is a base requirement of good design, because you do not want your headings to appear the same size on mobile as they do on a desktop — they need to scale proportionately.
So if you setup your font sizes per breakpoint, for your H1 headings you’d have something like 58px for desktop, 52px for tablet, and 46px for mobile.
This can work great, and is a method I’ve personally designed and developed with for years — until recently.
This is where clamp comes into play.
What is clamp?
Clamp is a code function that sets three values — a minimum value, preferred, and maximum value.
It appears like this:
clamp(minimum value, preferred value, maximum value)
You utilize the clamp function in place of the specific font size values in your CSS code. So instead of defining the exact size, like 58px, you just insert this clamp code (with actual values, of course).
With real values, your CSS code would look like this:
h1 {font-size: clamp(2.5rem, 1.786rem + 1.905vw, 3.5rem);
I often use this calculator to determine my clamp values: https://www.marcbacon.com/tools/clamp-calculator/.
How clamp works
Now how this works with fonts is by entering a minimum font size, which would be for mobile, and then a maximum font size — which would be for desktop (or the largest screens).
When enabled and setup for your font sizes, your text will scale responsively and smoothly across every single pixel — not just the main three breakpoints we discussed earlier.
As you make your window smaller, the text scales incrementally, but it will never get larger than your max value, and never smaller than your min value.
If you went the traditional route of dictating font sizes for the three main breakpoints, you would see a sudden “jolt” in the font sizes changing as they hit those certain breakpoints.
But with clamp, you get a smoother, more pleasing and consistent font scaling.
Now and moving forward, I’m utilizing clamp because I feel that from a design perspective it’s an improved user experience. There are so many different breakpoints to consider nowadays that don’t fall in the main three, but by utilizing clamp you don’t have to worry about it!
Have any questions? Just reply to this email, I’m happy to help!
