About Fluid Typography

Understanding the mathematics and pure logic behind the clamp() function, and how it dramatically simplifies responsive web design.

What is CSS clamp()?

The CSS clamp() function allows you to create values that fluidly scale up and down but are strictly bounded between a defined minimum and maximum size. It takes three comma-separated parameters:

clamp(MIN, PREFERRED, MAX)
  • 1
    MIN (Minimum Value)The absolute smallest size your element can ever shrink to. This is generally the size perfectly suited for small mobile devices.
  • 2
    PREFERRED (The Fluid Math)The value that calculates the fluid scaling in-between. This is where linear interpolation mathematically connects the viewport width (vw) to the size.
  • 3
    MAX (Maximum Value)The absolute ceiling point. The element will stop growing here, no matter how wide the browser window (desktop monitors) gets.

The Pure Logic of the Calculation

To calculate the "PREFERRED" value, you are essentially drawing a straight line on a graph between two points: Point A (Min Viewport Width, Min Font Size) and Point B (Max Viewport Width, Max Font Size).

1. Find the Slope (Rate of Change)

How fast should the font grow per every 1 pixel of screen width?

Slope = (Max Size - Min Size) / (Max Viewport - Min Viewport)

2. Find the Intersection (y-intercept)

What would the size theoretically be if the screen was 0 pixels wide?

Intersection = Min Size - (Min Viewport * Slope)

3. The Final Preferred Value

Translate this into CSS using REMs and VWs:

[Intersection]rem + [Slope * 100]vw

This generator handles all of this math for you instantly. When it outputs a result like clamp(1rem, 0.5rem + 2.5vw, 2rem), it is giving you the exact mathematically perfect line to scale smoothly from 1rem to 2rem across your provided breakpoints.