If you like front-end design, you probably love clamp(). It's a great way to shrink down your text progressively depending on viewport size, instead of defining breakpoints that snap.
With CSS containers, we can even clamp font-size based on its container.
But with variable-weight fonts, did you know that you can even progressively change the weight of your text?
Out of the box, it won't work, because clamping expects you to supply units, and font weights do not use units. The trick here is to divide by 1 unit, which effectively removes it.
h1 {
font-weight: calc(clamp(400px, 200cqw, 800px) / 1px);
}
The resulting effect is quite nice.
This is great for big bold headings that progressively shrink on smaller devices in order to read nicely.
Put it all together, add some paragraph text, and you've got a beautiful typography system that includes progressive font weighting, and can adjust based on both viewports and containers.
Top comments (0)