ruchira
// DESIGN TOOL

CSS clamp() fluid typography calculator

Generate fluid font sizes and spacing with CSS clamp(). Set the minimum and maximum, preview across screen widths and build a full type scale.

  • Free
  • No sign-up
  • Private: runs in your browser
// HOW IT WORKS

4 steps, no sign-up.

Built and maintained by Ruchira Sachinthana. Spotted a bug or want a feature? Tell me.

  1. 01Enter the smallest and largest size you want, and the screen widths they apply at.
  2. 02Drag the preview slider to see the size at any width.
  3. 03Optionally build a type scale from a base size and ratio.
  4. 04Copy the clamp() values as CSS, Tailwind classes or variables.
// FAQ

CSS clamp() calculator: questions, answered.

Something else? Ask on WhatsApp.

A rem part keeps the size responsive to the user's browser font setting, which matters for accessibility. Pure vw sizes ignore zoom preferences.

More free tools

All tools
DESIGNTailwind palette generator

Generate a perceptually even 50–950 colour scale from one brand colour, in OKLCH, with Tailwind v4 @theme tokens, CSS variables and contrast checks.

RUNS IN YOUR BROWSER
DESIGNFavicon generator

Create every favicon and app icon you need from one image, emoji or letter: favicon.ico, Apple touch icon, PWA and maskable icons, manifest and HTML.

RUNS IN YOUR BROWSER
DESIGNSVG optimiser

Shrink SVG files with SVGO without visible changes. Compare before and after, then copy the markup, a data URI or a React component.

RUNS IN YOUR BROWSER
// CUSTOM TOOLS

Need a tool like this built for your team?

Chat on WhatsApp