Logo
Back

Fluid Typography

I recall making font sizes fluid and scale in ratio according to the viewport was not an easy task few years ago. Here's the formula I had bookmarked from css-tricks.com

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Introducing clamp(), a css function that is made for exact this use case. Clamp allows you to set minimum and maximum value.

h1 {
 font-size: clamp(MIN, VAL, MAX);
}
Last Updated
March 31, 2022
Tags
typography

Related posts

    Weekly Design Documentaries Free Streaming — Helvetica

    Independent film director Gary Hustwit announced to offer free streaming of his past work to encourage people staying home. First title would be his typography documentary Helvetica (2007).

    Design Documentaries

    Catching up with some design documentaries in the last few months during quarantine, here's my recommended list! The two-season documentary series highlight artists across various fields of design. Ea

Logo