Type Scale Generator
A modular type scale from a base size and ratio, optionally fluid with CSS clamp().
About this tool
Set a base size, a ratio from minor second to golden ratio and the root font size, and every step from xs to 5xl is previewed in your chosen font. Switch on fluid mode to give large screens their own base and ratio; each step becomes a clamp() that scales smoothly between two viewport widths. Copy the CSS custom properties.
Modular scales and fluid type
A modular scale multiplies the base size by the same ratio for every step up and divides for every step down, so sizes relate to each other consistently — the typographic equivalent of musical intervals, which is where names like major third (1.25) and perfect fourth (1.333) come from. Small ratios such as 1.125–1.2 suit dense interfaces; 1.25–1.333 is a comfortable default for websites; 1.5 and above suit editorial headlines but make the top steps enormous. Fluid type removes the breakpoints: clamp(min, preferred, max) with a preferred value of rem + vw interpolates linearly between a small-screen size at one viewport width and a large-screen size at another, so a heading can be 28 px on a phone and 48 px on a laptop with no media queries. Values are output in rem, which respects the reader's browser font-size setting — the accessible choice — with the pixel equivalent alongside. Use them as font-size: var(--step-xl). The px to rem converter handles one-off values (px vs rem vs em: what each unit is relative to, and which to use where explains the units), the colour scheme generator builds the palette, and the fancy font generator is for decorative text.
Frequently asked questions
What is a good type scale ratio?
1.25 (major third) is a safe default for websites. Use 1.125–1.2 for data-heavy interfaces and 1.333–1.5 for editorial or marketing pages with big headlines.
How does fluid typography with clamp() work?
clamp(min, preferred, max) picks the preferred value — here a mix of rem and vw — but never goes below min or above max, so text grows smoothly between two screen widths.
Why use rem instead of px?
rem sizes follow the user's browser font-size setting, so people who enlarge text get larger text. px ignores that preference.
Is anything saved?
No. The scale is generated in your browser and nothing is stored or sent.