Viewport Ruler

Min Breakpoint
Max Breakpoint
Current Viewport

Typography Preview

Heading

Heading: The quick brown fox jumps over the lazy dog

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.

About This Tool

This tool helps you create fluid typography for responsive web design using CSS clamp() function. Fluid typography automatically scales text size based on viewport width, ensuring optimal reading experience across all devices.

How It Works:

  • Set min and max font sizes for each breakpoint (mobile, tablet, laptop, desktop).
  • Adjust formula breakpoints (min/max) to control the rate of scaling between sizes.
  • Toggle content width transition to automatically set min breakpoint to 1920px when designing for responsive container widths.
  • Copy the generated CSS clamp formula to use in your stylesheets.

The formula breakpoints are independent from the viewport preview, allowing you to fine-tune how text scales without affecting the visualization.

Understanding Fluid Typography:

Text size Viewport width Max size Min size Min Breakpoint Max Breakpoint font-size: clamp(MinSize, Calculation, MaxSize);

The CSS clamp() function takes three parameters: a minimum value, a preferred value, and a maximum value. The browser will use the preferred value, unless it's smaller than the minimum (it will use the minimum) or larger than the maximum (it will use the maximum).

Typography Settings

Desktop (1537px - 2559px)

Heading

40px
64px
Is content width transition from 70% to 90%?

These breakpoint values are only used for calculating the fluid typography formula and do not affect the viewport preview.

Laptop (1025px - 1536px)

Heading

32px
40px

These breakpoint values are only used for calculating the fluid typography formula and do not affect the viewport preview.

Widescreen (>2560px)

Heading

64px

Uses Desktop's max size by default

Tablet (769px - 1024px)

Heading

32px

Mobile (<768px)

Heading

24px

All paragraphs are fixed at 16px (1rem) for all screen sizes.

Use CSS clamp() directly:
Font size changing...