Fluid typography

CSS, Visual · May 16, 2021

Creates text that scales according to the viewport width.

  • Use the clamp() CSS function to clamp the value of font-size between 1rem and 3rem.
  • Use the formula 8vw - 2rem to calculate a responsive value for font-size (1rem at 600px, 3rem at 1000px).
Preview

Hello World!

<p class="fluid-type">Hello World!</p>
.fluid-type {
  font-size: clamp(1rem, 8vw - 2rem, 3rem);
}

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