Fluid Typography Calculator — CSS Clamp() & Responsive Type Tool
Calculate CSS clamp() values for fluid font sizes that scale smoothly between viewport breakpoints. Enter min/max font size and viewport widths to get a ready-to-use font-size declaration.
How to Use Fluid Typography Calculator — CSS Clamp() & Responsive Type Tool
How to Use the Fluid Typography Calculator
Step 1: Enter Your Font Size Range
In the Font size (px) section, enter the smallest and largest font sizes you want for this element. The minimum is the size used at your narrowest supported viewport (e.g., small phones), and the maximum is the size at your widest supported viewport (e.g., large desktops). Common body text values are 16px (min) and 20px (max).
Step 2: Set Your Viewport Width Range
In the Viewport width (px) section, enter the two breakpoints the font size should scale between. Typical values are 320px (small phone) to 1280px or 1440px (desktop). The font will be clamped at the minimum size for any viewport narrower than your minimum, and at the maximum size for any viewport wider than your maximum.
Step 3: Choose an Output Unit
Select rem or px for the generated output. rem is recommended because it respects the user's browser font-size preference and is required for WCAG accessibility compliance. The calculator assumes a 16px root font size when converting. If your project uses a different root size, use px output and convert manually.
Step 4: Read the Generated CSS
The tool instantly displays a font-size declaration ready to paste into your stylesheet. You also see the raw clamp() value separately — useful for CSS custom properties or when using a utility framework like Tailwind's arbitrary values.
Step 5: Check the Formula Breakdown
The Formula breakdown box shows the slope (vw coefficient), intercept, and rem values used. The slope represents how many pixels the font size changes per pixel of viewport width, expressed as a vw value. The intercept is the fixed rem/px offset.
Step 6: Review the Preview Table
The preview table shows the computed font size at eight standard viewport widths (320px to 1920px). Rows marked (min) or (max) show where the clamp constraint kicks in — the font stops scaling and stays fixed at the boundary value. The live "Aa" column renders actual text at each computed size for a quick visual check.
Step 7: Load a Preset
Click any preset button to pre-fill common configurations: body text (16→20px), H1 heading (32→64px), subheading (18→28px), and small text (12→15px). Presets are a fast starting point — adjust the values to match your design system.
Step 8: Copy and Use
Click Copy next to the CSS declaration to copy it to your clipboard and paste directly into your stylesheet, a CSS custom property, or a Tailwind config.
Common Use Cases:
- Responsive body text: Scale paragraph size from 16px on mobile to 20px on desktop without media queries
- Fluid headings: Smoothly scale H1 from 32px to 64px across breakpoints
- Design systems: Define a fluid type scale using CSS custom properties and the clamp() values
- Accessibility-friendly scaling: Use rem output so font size respects browser zoom and user preferences
- Tailwind projects: Paste the clamp() value as an arbitrary fontSize in tailwind.config.js
- CMS-based sites: Generate consistent fluid type rules for editors who set text styles
Tips and Best Practices:
- Always use rem output for accessible typography — it scales with the user's browser font-size setting
- A common fluid body text combination is 16px min at 320px and 20px max at 1280px
- For headings, a larger ratio (e.g., 32→64px) creates more dramatic and readable scaling
- Avoid setting your min viewport below 320px — that is the smallest common device width
- Keep the difference between min and max viewport wide enough (at least 500–700px) to allow meaningful scaling
- Test the preview table to confirm the font never feels too small or too large at any viewport
- Pair fluid type sizes with a consistent vertical rhythm (line-height, spacing) for best readability
- A negative intercept value is valid and common — it simply means the clamp formula passes through zero between two viewport sizes, not at any supported viewport
Frequently Asked Questions
Most Viewed Tools
TOTP Code Generator — 2FA Testing Tool
Generate time-based one-time passwords from a TOTP secret key. Enter your base32 secret, choose a period and digit length, and get the current and next codes with a live countdown timer. Useful for testing and debugging 2FA integrations.
Use Tool →JSON to Zod — Schema Generator
Generate Zod validation schema code from a JSON sample object. Infers z.string(), z.number(), z.boolean(), z.array(), z.object(), and z.null() types automatically. Handles nested objects, arrays of objects with optional field detection, and outputs copy-ready TypeScript with import and z.infer type alias.
Use Tool →JSONL Formatter — Line-by-Line Validator
Format, validate, and inspect JSON Lines (JSONL) and NDJSON files. Validates each line individually, reports parse errors by line number, outputs compact JSONL or a pretty-print preview, and lets you download the cleaned file.
Use Tool →TLS Cipher Suite Checker — Strength Analyzer
Check TLS protocol version compatibility and cipher suite strength ratings against current best practices. Supports IANA and OpenSSL cipher names — rates each suite as Strong, Weak, or Deprecated and explains why.
Use Tool →Secret Scanner — API Key & Credential Detector
Scan pasted text, code, or config files for accidentally exposed API keys, tokens, passwords, and private keys. Detects 50+ secret types across AWS, GitHub, Stripe, OpenAI, and more — all client-side, nothing leaves your browser.
Use Tool →Password Entropy Calculator — Crack Time Estimator
Calculate the information-theoretic bit entropy of any password or API key. Detects character set pools automatically, shows the total number of possible combinations, and estimates crack time across five attack scenarios from rate-limited web logins to GPU cracking clusters.
Use Tool →TOML Config Validator — Syntax Error Finder
Validate TOML configuration file syntax and report errors with line numbers. Paste any TOML content — Cargo.toml, pyproject.toml, config.toml — and instantly see a green checkmark with key counts and structure stats, or a precise error message pointing to the exact line. Includes a collapsible JSON structure preview to confirm what was parsed.
Use Tool →Content Security Policy Generator — XSS Shield Builder
Build Content Security Policy headers interactively. Toggle directives like script-src, style-src, and img-src, select allowed source tokens, and add custom origins. Instantly outputs your CSP as an HTTP header, meta tag, Nginx directive, or Apache header.
Use Tool →Related Development Tools
QR Code Generator — Downloadable PNG Output
FeaturedCreate custom QR codes for URLs, text, and contact info
Use Tool →TOML to JSON Converter — Config File Tool
Convert TOML configuration files to JSON format instantly. Paste any TOML — Cargo.toml, pyproject.toml, config.toml — and get clean, pretty-printed JSON output. Supports all TOML types: strings (basic, literal, multi-line), integers (decimal, hex, octal, binary), floats, booleans, datetimes, arrays, inline tables, tables, and arrays of tables.
Use Tool →JSONL Formatter — Line-by-Line Validator
Format, validate, and inspect JSON Lines (JSONL) and NDJSON files. Validates each line individually, reports parse errors by line number, outputs compact JSONL or a pretty-print preview, and lets you download the cleaned file.
Use Tool →HTML Table to CSV Extractor — Table Scraping Tool
Extract HTML table markup and convert it to clean CSV format. Paste any HTML snippet or full page source — the tool finds the table, parses thead and tbody rows, handles colspan and rowspan merging gracefully, and outputs a properly quoted CSV ready to download or paste into a spreadsheet. When multiple tables are found, switch between them with a click.
Use Tool →TOML Config Validator — Syntax Error Finder
Validate TOML configuration file syntax and report errors with line numbers. Paste any TOML content — Cargo.toml, pyproject.toml, config.toml — and instantly see a green checkmark with key counts and structure stats, or a precise error message pointing to the exact line. Includes a collapsible JSON structure preview to confirm what was parsed.
Use Tool →INI to JSON Converter — Config File Tool
Convert INI configuration files and Java .properties files to JSON format instantly. Paste any INI file — php.ini, app.ini, Windows .ini — or a Java .properties file with dotted keys and get clean, structured JSON output. Supports section headers, inline comments, quoted values, boolean coercion (true/false/yes/no/on/off), numeric parsing, continuation lines, and Unicode escapes.
Use Tool →JSON to TypeScript — Interface Generator
Generate TypeScript interfaces from JSON objects instantly. Infers types for strings, numbers, booleans, arrays, and nested objects. Detects optional fields from array element merging, handles null values, and outputs clean, ready-to-use interface definitions.
Use Tool →CSV Pivot Table Generator — Aggregation Tool
Group and aggregate CSV data by one or more columns to create summary pivot views. Supports Count, Sum, Average, Min, and Max aggregations with multi-column grouping. Paste or upload any CSV, select group-by columns and aggregation type, and download the pivot summary as a new CSV file. Runs entirely in your browser.
Use Tool →Share Your Feedback
Help us improve this tool by sharing your experience