CSS Clamp Generator (Fluid Typography)
Generate a CSS clamp() value that grows smoothly from a minimum size on small screens to a maximum…
Type Scale Generator
Build a harmonious typographic scale from a base size and ratio, preview it, and export CSS variables. Switch on fluid mode to get clamp() values for every step.
How to use
- Set the base font size and pick a ratio.
- Choose how many steps you need above and below the base.
- Turn on fluid mode to scale between a mobile and a desktop scale, then copy the CSS.
What this tool does
Each step multiplies the previous size by the ratio (size = base × ratio^step). In fluid mode, each step gets a clamp() value that moves from the small-screen scale to the large-screen scale between the two viewport widths.
Why it matters
A consistent scale removes guesswork from heading and text sizes and keeps a design coherent across pages, themes and Elementor global fonts.
Frequently asked questions
Which ratio should I use?
Smaller ratios (1.125–1.2) suit dense interfaces and long reading; larger ratios (1.25–1.333) give stronger contrast between headings and body text.
Related tools
Spacing Scale Generator (4pt & 8pt Grid)
Create a consistent spacing system on a 4pt or 8pt grid and export it as CSS custom properties…
PX to REM Converter
Convert pixels to rem instantly with any base font size, see a reference table, or convert every px…
Related guides
Web Design Guides
How to Build a Type Scale for the Web
Planned article. Write the full piece here, then delete this brief.