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 Gratis Sin registro

Font Size Calculator

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

Cargando la herramienta…

Acerca de esta herramienta

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

Cómo 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.

Preguntas frecuentes

Herramientas relacionadas

Verificador de Contraste de Color

Verifique las relaciones de contraste WCAG 2.1 para pares de colores de primer plano/fondo y obtenga resultados de aprobado/reprobado al instante.

Generador de códigos QR

Construya visualmente valores de box-shadow de CSS con vista previa en vivo — admite múltiples capas.

Generador de códigos QR

Construya visualmente gradientes CSS lineales y radiales y copie la propiedad CSS lista para usar.