Type Scale Calculator: Modular and Fluid clamp() Sizes

Set a base font size and a ratio and this calculator builds a modular type scale: every step in px and rem, a live preview, and CSS custom properties you can paste straight in. Switch on fluid mode and it writes clamp() values that grow smoothly between a mobile and a desktop scale. The point most people miss: the ratio compounds, so small changes matter a lot at the top. From a 16px base, five steps at 1.25 give a 48.8px headline; at 1.333 the same five steps give 67.3px, which is wider than most phone layouts can carry for a long word. That is why fluid scales use a tighter ratio on small screens.

How a modular type scale works

Each size is the one below it multiplied by the same ratio. With a 16px base and a 1.25 ratio, step 1 is 20px, step 2 is 25px, step 3 is 31.25px and step 4 is 39.06px. Going down, step -1 divides instead: 12.8px. Because every size shares the same multiplier, the jumps between headings feel even, which is hard to get by picking numbers by eye.

Choosing a ratio

• 1.125 to 1.2 suits dense interfaces: dashboards, apps and forms where many heading levels sit close together.
• 1.25 to 1.333 is a common middle ground for content sites and marketing pages.
• 1.5 and above gives dramatic contrast for editorial layouts and landing pages with few heading levels, but the top steps get very large very quickly.

How the fluid clamp() values are calculated

For each step the calculator works out the mobile size and the desktop size, then draws a straight line between them across your two viewport widths. The slope becomes the vw part and the starting point becomes the rem part, and clamp() holds the size at the mobile value below the small viewport and at the desktop value above the large one. Keeping a rem term in the middle value matters: a size set purely in vw ignores the reader's browser zoom and text size settings. If you are testing a new type scale on a live site, treat it like any other change and measure it; our A/B test sample size calculator tells you how much traffic you need, and the colour contrast checker confirms your text colours still pass at the new sizes.