Fluid Font Generator

This tool generates fluid typography using CSS clamp(). Font sizes scale smoothly between minimum and maximum viewport widths.

How it works: At the minimum screen width, fonts use the minimum base size and ratio. At the maximum screen width, they use the maximum values. Between these points, sizes interpolate linearly.

Scale relationship: When min and max values are closer together, the fluid scaling is more subtle. When further apart, the scaling is more dramatic. A balanced approach typically keeps ratios similar while adjusting base sizes for readability.

Scale Configuration

Minimum (Mobile)

At this minimum viewport width, all font sizes in your type scale are computed as the base font size times a power of your chosen ratio.

Base font size (px)

Screen width (px)

Type scale ratio

Maximum (Desktop)

At this maximum viewport width, all font sizes in your type scale are computed as the base font size times a power of your chosen ratio.

Base font size (px)

Screen width (px)

Type scale ratio

Type scale

Provide a comma-separated list of names for each step in your type scale, in ascending order of font size. Use any convention you want. Be sure to also identify the name of your base step.

All steps

Baseline step

Output Options

Variable prefix Use your preferred naming convention for the output CSS variables. Allowed characters: a-z,A-Z,0-9,_,-

Rounding The maximum number of decimal places in the output.

Use container inline size (cqi) instead of viewport width Note: Container queries may not be supported by all browsers.

Include fallback CSS Fall back to media queries if the browser doesn't support clamp.

Rem value (pixels) The pixel value of 1rem. Defaults to 16px in all browsers but can be changed with CSS. For example, if you set your root font size to 62.5%, then 1rem equals 10px.

Screen Width Preview

1000px