Fluid type scale calculator
Set a small and a large screen, a base size and a ratio for each. Get a full set of clamp() font sizes that scale smoothly in between.
@font-face generator
Detects weight and style and writes the CSS.
Open tool →Fallback font matcher
Stop text jumping when web fonts load.
Open tool →Font stack builder
Modern system font stacks, ready to copy.
Open tool →The WordPress plugin
Looking for the original Web Fonts Loader plugin? Find out where it lives now.
Plugin page →Quick answer: A fluid type scale uses CSS clamp() so font sizes grow smoothly between a minimum and a maximum viewport width. Set your base sizes, ratios and viewport range above, then copy the generated CSS custom properties. Sizes are in rem so browser zoom and user settings still work.
How the calculation works
For each step the tool picks a size at the smallest viewport and a size at the largest. It then writes clamp(min, intercept + slope * 100vw, max) where the slope and intercept make the size change in a straight line between the two screens. Below the small screen the size stays at its minimum; above the large screen it stops at its maximum.
Choosing ratios
- 1.125 (major second) is subtle, good for dense interfaces.
- 1.2 (minor third) is a comfortable default for small screens.
- 1.25 (major third) suits large screens.
- 1.333 and 1.5 give strong hierarchy for editorial design.
Frequently asked questions
What does clamp() do?
clamp(min, preferred, max) keeps a value between a minimum and maximum. With a preferred value that includes a vw unit, the size scales with the viewport but never goes outside the limits.
Why use rem instead of px?
rem follows the user's default font size, which is better for accessibility. The preferred value also includes a rem part, so pinch zoom and browser zoom still enlarge the text.
What are steps?
Steps are positions on the scale. Step 0 is the base (body text), positive steps are larger (headings) and negative steps are smaller (captions).
Can I use different ratios for small and large screens?
Yes. Many designers use a smaller ratio on mobile and a larger one on desktop, so headings stay proportionate on each.