Fluid typography

Sizes that follow the screen

Settings

Minimum size (px)

Maximum size (px)

Minimum viewport width (px)

Maximum viewport width (px)

Root font size (px)

The size stays at its minimum below the minimum width, at its maximum above the maximum width, and changes smoothly in between.

Generated CSS

font-size: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);

Preview

Simulated viewport width: 800 px

Resulting size: 18.09 px

The quick brown fox jumps over the lazy dog

Type scale

Ratio on small screens

Ratio on large screens

Steps below the base

Steps above the base

Step	Small screen	Large screen	At 800 px
--step-5	39.81 px	61.04 px	Aa 50.89
--step-4	33.18 px	48.83 px	Aa 41.34
--step-3	27.65 px	39.06 px	Aa 33.6
--step-2	23.04 px	31.25 px	Aa 27.32
--step-1	19.2 px	25 px	Aa 22.23
--step-0	16 px	20 px	Aa 18.09
--step--1	13.33 px	16 px	Aa 14.72
--step--2	11.11 px	12.8 px	Aa 11.99

:root {
  --step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
  --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
  --step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  --step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
  --step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
  --step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
  --step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
  --step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
}

px / rem / em converter

Pixels (px)

rem (root size)

em (parent size)

Parent size for em (px)

About this tool

This tool calculates a fluid font size with the CSS clamp() function: text stays at a minimum size on small screens, at a maximum size on large ones, and scales linearly in between. You enter both sizes and both viewport widths in pixels, along with the root font size, and get a font-size declaration expressed in rem and vw.

A slider simulates the viewport width so you can see the resulting size. The tool also builds a type scale: using classic ratios from minor second to golden ratio, set separately for small and large screens, it outputs --step-N custom properties for your headings and body text. A px, rem and em converter rounds out the page.

How to use it

Fill in Minimum size (px), Maximum size (px), the minimum and maximum viewport widths, and Root font size (px).
Drag the Simulated viewport width slider to check the Resulting size, then copy the Generated CSS.
Under Type scale, choose the Ratio on small screens, the Ratio on large screens, and the number of steps below and above the base.
Click Copy the variables to grab the --step-N custom properties.
Use the px / rem / em converter to switch between units.

Frequently asked questions

How is the clamp() value calculated?

The tool draws a line from the minimum size at the minimum width to the maximum size at the maximum width. From that it derives a rem value plus a vw percentage, bounded by both sizes converted to rem using your root size.

Why is the output in rem instead of px?

Bounds in rem follow the font size the user chose in their browser, which respects their accessibility settings. The vw part is what makes the size change with the viewport width.

Can a size get smaller on large screens?

Yes. If the maximum size is smaller than the minimum size, the slope becomes negative and the tool puts the bounds back in the right order, since clamp() requires the minimum to be lower than the maximum.

What is a fluid type scale?

Each step multiplies the base size by a ratio, such as 1.25. Using a smaller ratio on small screens keeps headings proportionate on mobile while adding more contrast on large screens, with each step becoming its own clamp() value.