Fluid Typography with CSS clamp()

How Does the CSS Fluid Typography Formula Work?

To create perfectly responsive text using the clamp() function, we need to know four basic numbers. Two of them define the font size, and the other two define the screen size:

Minimum font size (e.g., the smallest text on mobile)
Maximum font size (e.g., the largest text on a large monitor)
Minimum viewport width – where the text starts growing
Maximum viewport width – where the text stops growing

Writing it looks exactly like this, where we just need to calculate the middle part:

clamp(12px, YOUR_FORMULA_GOES_HERE, 60px)

Let’s look at the magic formula that connects these 4 numbers.

Let’s use your exact specifications:

Text: min = 12px, max = 60px
Viewport: min = 320px, max = 1440px

The entire formula consists of three steps. Let’s calculate them together:

Step 1: Calculate the Rate of Growth (Slope)

We want to know how many pixels the text should grow for every single pixel the screen expands.

How much will the text grow in total? 60px – 12px = 48px
How much will the viewport grow in total? 1440px – 320px = 1120px

Now, we divide these two numbers to get the slope:

Slope = 48 / 1120 = 0.042857

To turn this into a CSS vw unit (percentage of the viewport), we multiply it by 100:

Slope_vw = 0.042857 * 100 = 4.2857vw

Step 2: Calculate the Starting Point (Intercept)

Now we need to find the fixed pixel value that we must add to our vw value so that the text measures exactly 12px on a 320px screen.

The formula says: Take the minimum font size and subtract (growth rate × minimum viewport).

Intercept = 12px - (0.042857 * 320px)

Intercept = 12 - 13.714 = -1.714px

Note: We got a negative number -1.714px, which is completely fine. It just means that if the screen were theoretically 0px wide, the text would be in the negative range—but our text only starts growing from 320px.

Step 3: Put It into calc()

Now we combine the two numbers we calculated (-1.714px and 4.2857vw) into our middle (ideal) value.

We merge them using calc():

calc(-1.714px + 4.2857vw)

The Final Code for Your Website

Your final and fully functional clamp() code looks exactly like this:

font-size: clamp(12px, calc(-1.714px + 4.2857vw), 60px);

When you drop this line into your CSS, the browser ensures that on mobile (320px), the text is exactly 12px. Between mobile and desktop, it scales smoothly, and on a large desktop (1440px and up), it locks perfectly at 60px.