Fluid Typography Calculator

Generate CSS clamp() functions for fluid typography. Make your text scale smoothly between mobile and desktop without the math.

Typography Settings

Font Size Range

Viewport Range

Units

Line Height

Generated CSS

/* Configure your typography settings to see the generated CSS */

Live Preview

Fluid Typography Preview

The quick brown fox jumps over the lazy dog. This text will scale smoothly between different screen sizes using CSS clamp() functions.

Try switching between device frames to see how the typography adapts to different viewport sizes.

Common Typography Presets

📰 Heading

Large headings for hero sections

32px → 64px | 320px → 1200px

📋 Subheading

Medium headings for sections

20px → 32px | 320px → 1200px

📄 Body Text

Comfortable reading text

16px → 20px | 320px → 1200px

🏷️ Caption

Small text for captions

12px → 14px | 320px → 1200px

🎨 Display

Extra large display text

48px → 96px | 320px → 1200px

📱 Compact

Space-efficient design

14px → 18px | 320px → 1200px

Usage Examples

Typography Scale

/* Typography Scale */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.3;
}

p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
}

Component-Based

/* Component Typography */
.card-title {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
}

.card-text {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.5;
}

.button-text {
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  font-weight: 500;
}

CSS Clamp Generator Guide

What is CSS Clamp() for Fluid Typography?

CSS clamp() is a modern CSS function that creates fluid typography by setting a minimum, preferred, and maximum value. This enables font sizes that scale smoothly between breakpoints, eliminating awkward jumps in text size and providing a seamless reading experience across all devices.

Why Use Fluid Typography?

Fluid typography provides significant advantages over traditional responsive font sizing:

  • Smooth scaling between breakpoints without media queries
  • Better accessibility with optimal reading sizes on all devices
  • Improved user experience with consistent text proportions
  • Reduced CSS complexity and maintenance overhead
  • Modern approach that works with viewport units

How to Use This CSS Clamp Generator

1

Set Minimum Font Size

Define the smallest font size for mobile devices. This ensures readability on small screens.

2

Set Maximum Font Size

Define the largest font size for desktop screens. This prevents text from becoming too large.

3

Configure Viewport Range

Set the minimum and maximum viewport widths where scaling should occur.

4

Copy Generated CSS

Copy the clamp() function and use it in your CSS for instant fluid typography.

CSS Clamp() Syntax Explained

Basic Syntax

clamp(MINIMUM, PREFERRED, MAXIMUM)

The function clamps a value between a defined minimum and maximum range.

Fluid Typography Example

font-size: clamp(16px, 4vw, 24px);

Font size scales from 16px to 24px based on 4% of viewport width.

Typography Presets

Display Typography

For hero sections and major headings:

  • • Range: 48px to 96px
  • • Use for: H1, hero text
  • • Line height: 1.1

Heading Typography

For section headings and subheadings:

  • • Range: 20px to 32px
  • • Use for: H2, H3, section titles
  • • Line height: 1.3

Body Typography

For paragraphs and reading content:

  • • Range: 16px to 20px
  • • Use for: p, article text
  • • Line height: 1.6

Caption Typography

For small text and captions:

  • • Range: 12px to 14px
  • • Use for: figcaption, small text
  • • Line height: 1.4

Best Practices for Fluid Typography

Design Guidelines:

  • Maintain readable minimum sizes (16px for body text)
  • Use appropriate line heights for readability
  • Test on actual devices, not just viewport resizers
  • Consider accessibility and user preferences
  • Balance scaling with design consistency
  • Use modular scale for harmonious sizing

Common Use Cases

Responsive Headlines

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
}

Perfect for hero sections and main headings.

Article Body Text

p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.6;
}

Ideal for blog posts and article content.

Component Scaling

.card-title {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: 600;
}

Great for UI components and cards.

Browser Compatibility

Modern Browser Support

CSS clamp() is supported in all modern browsers:

  • • Chrome 79+, Firefox 75+, Safari 13.1+
  • • Edge 79+, Opera 66+
  • • iOS Safari 13.4+, Android Chrome 79+

For older browsers, consider fallbacks with media queries.

Advanced Techniques

Combining with CSS Custom Properties

:root {
  --min-font: 16px;
  --max-font: 24px;
  --viewport-unit: 4vw;
}

.fluid-text {
  font-size: clamp(var(--min-font), var(--viewport-unit), var(--max-font));
}

Typography Scale System

:root {
  --text-xs: clamp(0.75rem, 2vw, 0.875rem);
  --text-sm: clamp(0.875rem, 2.5vw, 1rem);
  --text-base: clamp(1rem, 3vw, 1.125rem);
  --text-lg: clamp(1.125rem, 3.5vw, 1.25rem);
  --text-xl: clamp(1.25rem, 4vw, 1.5rem);
}