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.
CSS Neumorphism Generator
Create Soft UI (neumorphism) effects with two complementary box-shadows. Adjust base color, distance, blur and type (raised, flat, pressed). Copy ready CSS. Everything in your browser.
PX to REM and EM Converter
Type a pixel, rem or em value and the other two update live from your root font size, 16px by default, plus a table from 8 to 96 px in pt too.
CSS Button Generator
Create custom CSS buttons: color, text, padding, border-radius, shadow and hover. Live preview and ready-to-copy HTML+CSS. Everything in your browser.