Skip to content

Fluid typography

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).

<p class="fluid-type">Hello World!</p>

.fluid-type {
  font-size: clamp(1rem, 8vw - 2rem, 3rem);
}

More like this

CSS · December 30, 2020
Etched text

Creates an effect where text appears to be "etched" or engraved into the background.
CSS · December 28, 2022
Use clamp() in CSS for responsive typography

Implement responsive typography with the CSS clamp() function.
CSS · May 5, 2022
Image gallery with vertical scroll

Creates a horizontally scrollable image gallery.
CSS · May 1, 2022
Image gallery with horizontal scroll

Creates a horizontally scrollable image gallery.