Build a modular type scale—outputs CSS custom properties and classes for h1–h6, p and small.
Minor 1.067
Minor 1.125
Perfect Fifth 1.2
Major Third 1.25
Perfect Fourth 1.333
Perfect Fifth 1.5
Golden 1.618
Preview & Output
H1 — Typography Scale
H2 — Subheading
H3 — Section Title
H4 — Smaller Title
H5 — Minor Title
H6 — Caption
This is a paragraph demonstrating the current scale. Use the controls on the left to adjust base size, ratio and steps.
Small / fine print text sample
Generated CSS
/* Click Generate to build CSS */
🔧 Similar Tools
{
"seo_title": "Typography Scale Generator — RideWattly",
"meta_description": "Create a balanced modular typography scale (h1–h6, p, small). Choose base size, ratio and number of steps. Output ready-to-use CSS variables and classes.",
"short_summary": "Interactive generator that builds a modular type scale and exports CSS variables + classes. Choose base font-size (px/rem), ratio (presets & custom) and scale length.",
"long_article": "## How to use the Typography Scale Generator\n\nThis tool helps you produce a consistent typographic rhythm for your site or UI system. Choose a base font size and a ratio to scale typographic steps. The generator then outputs CSS custom properties and utility classes you can drop into your stylesheet.\n\n**Key concepts**:\n- Base font-size: the root or body font-size (16px is a common default).\n- Ratio: the multiplier used for each step in the scale (1.25 is a common starting point; 1.618 is the golden ratio).\n- Steps: how many increments above the base you want (the tool maps these to H1..H6 + body + small).\n\n**Practical tips**:\n- Use px for pixel-perfect control during design, then switch to rem for production to respect user zoom and accessibility.\n- For body copy keep sizes between 14–18px (or 0.875–1.125rem).\n- Use tighter line-height for headings (1.05–1.2) and more generous for body (1.4–1.6).\n\n**Output**:\n- :root variables (e.g. --type-1, --type-2...)\n- CSS classes (e.g. .type-h1 { font-size: var(--type-6); })\n\n**Why it matters**:\nA modular scale keeps typography consistent across components and speeds up design decisions. It's essential for responsive systems and accessible typography.",
"image_prompt": "A clean, modern UI mockup of a web Typography Scale Generator. Show a left control panel with sliders and numeric inputs labeled 'Base size', 'Ratio', 'Steps', and a right preview area displaying H1..H6 and paragraph text. Minimalist aesthetics, soft shadows, rounded cards, light neutral background, subtle teal accent. Realistic web UI — 16:9 composition."
}