Typographic Scale
Generate a harmonic typographic scale based on a ratio (1.125, 1.25, 1.333, 1.5, 1.618). Output in rem, px and CSS clamp.
| Step | rem | px | Typical use |
|---|
How does a typographic scale work?
In a harmonic typographic scale, the base size gets multiplied by a constant ratio at every step. That's what yields pleasant visual proportions that stay consistent across headings, subheadings and body text.
Among the ratios, the golden one (1.618) is the most striking; the major third (1.25) feels more balanced and does well in UIs. The result drops straight into CSS through custom properties, or you can copy it into a design system.
The whole calculation happens in your browser.
Generate a harmonious type scale
In a well-made design, font sizes don't come out of nowhere. They follow a scale resting on a mathematical ratio, and that ratio is where the harmonious visual hierarchy comes from. The tool builds that scale from whatever ratio you pick.
You choose a classic proportion, among 1.125 (major second), 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth) and 1.618 (the golden ratio), and the calculation returns the sequence of sizes with the output in rem, ready to drop into your CSS. It's a way to give a site's typography rhythm and consistency without guessing at values.
The math runs in the browser, right away. A real help for anyone who designs or develops and wants a proportional, well-resolved type hierarchy.
Related Tools
CSS Glassmorphism Generator
Create frosted-glass effects with backdrop-filter, transparency and borders. Adjust blur, saturation and opacity. Live preview and copy-ready CSS. Everything in your browser.
CSS Gradient Generator
Create linear and radial CSS gradients with real-time preview. Adjust colors, positions and angle. Copy the CSS code with one click.
Mesh Gradient Generator
Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.