Fluid Typography

Updated on



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