Tip: Use clamp() in CSS for responsive typography

CSS, Visual · Dec 28, 2022

Responsive typography has been in fashion for a while now, but some developers find it hard to implement. This is usually due to confusing algebraic formulas or complex hacks. Luckily, CSS has introduced the clamp() function, which makes it easy to create responsive typography with a single line of code. All you need to do is set the minimum, maximum, and preferred value and the browser will do the rest.

h2 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

For a more complex example, take a look at the Fluid typography snippet.

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Tips & Tricks

    Snippet collection

    A collection of quick tips and tricks to level up your coding skills one step at a time.

  • Custom checkbox

    CSS, Visual

    Creates a styled checkbox with animation on state change.

  • Creates a styled radio button with animation on state change.

  • A hover effect where the gradient follows the mouse cursor.