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 Gratuito Sem cadastro

Font Size Calculator

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

Carregando ferramenta…

Sobre esta ferramenta

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().

Como usar

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.

Perguntas frequentes

Ferramentas relacionadas

Verificador de Contraste de Cores

Verifique as taxas de contraste WCAG 2.1 para pares de cores de primeiro plano/fundo e obtenha resultados de aprovação/reprovação instantaneamente.

Gerador de QR Code

Crie valores de box-shadow CSS visualmente com prévia ao vivo — suporta múltiplas camadas.

Gerador de QR Code

Crie visualmente gradientes CSS lineares e radiais e copie a propriedade CSS pronta para uso.