What is CSS clamp() for typography?

The CSS clamp(min, preferred, max) function allows a font size to scale fluidly between a minimum and maximum value as the viewport changes width. The preferred value is a viewport-relative (vw) expression that interpolates smoothly between the two bounds.

How is the vw value calculated?

The slope is (maxSize - minSize) / (maxVW - minVW). The intercept is minSize - slope * minVW. The formula becomes: clamp(minSize, slope * 100vw + intercept, maxSize). This ensures the font hits exactly minSize at minVW and maxSize at maxVW.

What is a modular type scale?

A modular type scale generates a series of font sizes by multiplying a base size by a fixed ratio (e.g., 1.25 or 1.333). Common ratios include Minor Third (1.2), Major Third (1.25), Perfect Fourth (1.333), and Golden Ratio (1.618).

Should I use px or rem?

rem is generally preferred because it respects user browser font-size preferences for accessibility. This tool outputs both px and rem values so you can choose the unit that fits your project.

Design 無料サインアップ不要

Font Size Calculator

Generate CSS clamp() fluid typography values for responsive font sizes.

ツールを読み込み中…

このツールについて

Calculate perfect fluid typography using CSS clamp(). Enter a minimum and maximum font size along with the viewport width range where the font should scale, and the tool generates the exact clamp() expression ready to paste into your stylesheet. A live preview shows how the text scales across breakpoints from 320px to 1920px. The tool also generates a complete fluid type scale (xs through 4xl) using your chosen modular ratio, so you can establish a consistent typographic system in seconds. Includes a breakdown of the vw-based formula used inside the clamp().

使い方

1 Enter the minimum font size (in px) for small screens.
2 Enter the maximum font size (in px) for large screens.
3 Set the minimum viewport width where scaling begins.
4 Set the maximum viewport width where scaling ends.
5 Copy the generated CSS clamp() value.
6 Scroll down to see the full fluid type scale based on your modular ratio.

このツールについて

使い方

よくある質問