Darnly
Free tools

Fluid font sizes with clamp()

Pick a body size and a scale ratio, then drag the screen from phone to desktop and watch every heading resize. Copy it as CSS variables or a Tailwind config.

Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome

768pxTablet

Ship it today

Fluid headings, no breakpoints

Your text grows with the screen. On a phone it stays compact, on a big monitor it has room to breathe, and every width in between gets a size in between.

A section heading

Drag the slider above or press Play to watch every size change at once.

A smaller heading

A card title

Small print · captions · labels

Your type scale

    Font size (px) by screen width. Flat ends are where clamp() stops.
    📱 Small screen
    px
    px
    🖥️ Large screen
    px
    px
    px to rem converterFind a site’s fonts
    More free tools
    See all 89 tools
    How it works
    1. Drag the screen width slider, or press Play. The sample page resizes from a phone to a desktop and the text grows smoothly with it, with no jumps at breakpoints.
    2. Pick how big body text is on a phone and on a desktop, and how fast headings grow (the ratio). Each heading is the size below it times the ratio.
    3. Copy the result as CSS variables, a Tailwind v4 @theme block or a Tailwind v3 config, or copy a prompt that asks your AI coding agent to put it in your project.
    Questions
    What is fluid typography?
    Text that grows smoothly with the screen instead of jumping at breakpoints. A heading might be 28px on a phone and 42px on a laptop, and every width in between gets a size in between. You write it once with CSS clamp() and need no md: or lg: text classes.
    How does clamp() work for font sizes?
    clamp(min, preferred, max) uses the preferred value but never goes below min or above max. Here the preferred value is a rem amount plus a vw amount, so it grows with the screen width. Below the small screen width the text stays at the min size, and above the large width it stays at the max.
    What is a type scale ratio?
    Each step is the step below it times the ratio. With a 16px body and a 1.25 ratio (major third), the next sizes are 20px, 25px, 31.25px and so on. Small ratios like 1.125 feel calm and suit phones and dense apps. Large ratios like 1.5 make big, dramatic headings. Using a smaller ratio on phones and a bigger one on desktop is common.
    Does fluid type break browser zoom?
    It can. Text sized only in vw does not grow when people zoom in. This tool always mixes rem with vw, so zoom and the browser’s font size setting still work. The zoom check marks any size whose large value is more than 2.5 times its small value, because then zooming to 200% may not double it (WCAG 1.4.4).
    How do I use it with Tailwind?
    In Tailwind v4, paste the @theme block into your main CSS file after @import "tailwindcss". It replaces text-base, text-xl, text-3xl and the others with fluid versions, so your existing classes just work. In Tailwind v3, add the sizes to theme.extend.fontSize in tailwind.config.js.
    Is anything uploaded?
    No. Everything runs in your browser.