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.
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.
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.
Output Options
Screen Width Preview
1000px