Fluid Type Scale Calculator

Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any design system.

Minimum (Mobile)Define the minimum font size and viewport width for your type scale's baseline step. The minimum font size for all other steps is this baseline font size scaled up/down by your chosen type scale ratio.
Maximum (Desktop)Define the maximum font size and viewport width for your type scale's baseline step. The max font size for all other steps is this baseline font size scaled up/down by your chosen type scale ratio.
Type scaleProvide 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.

Preview your type scale

Preview controls
StepMinMaxRenderedPreview
sm12.8px14.25px14.25pxAlmost before we knew it, we had left the ground
base16px19px19pxAlmost before we knew it, we had left the ground
md20px25.33px25.33pxAlmost before we knew it, we had left the ground
lg25px33.76px33.76pxAlmost before we knew it, we had left the ground
xl31.25px45px45pxAlmost before we knew it, we had left the ground
xxl39.06px59.99px59.99pxAlmost before we knew it, we had left the ground
xxxl48.83px79.97px79.97pxAlmost before we knew it, we had left the ground

How it works

A modular type scale consists of a baseline font size and proportionally smaller and larger font sizes. Traditionally, design systems used static type scales, where each step has a fixed font size at every viewport width.

By contrast, in a fluid type scale, each modular step has a minimum, maximum, and variable font size. We can leverage CSS clamp and viewport width (vw) units to generate a set of font size variables that scale linearly between their minimum and maximum sizes, with mathematical precision.

This is done by solving the equation y = mx + b, which corresponds to the preferred value in a CSS clamp declaration.

Learn more