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

    Custom Fonts with Tailwind CSS in NextJS

    Next has released @next/font solution to integrate with google fonts as well as local fonts. Check out https://nextjs.org/docs/pages/building-your-application/optimizing/fonts for the latest implement

    Create Sparkline Charts Without Any Code Using Sparks

    Sparkline is a tiny chart to visualise trends of a series of data values. After The Flood created Sparks font to generate sparkline chart using a line of text, no Excel or any design software is requi