Typography Scale Generator for Font Hierarchy
Set body and heading roles from a base size and ratio. Preview the hierarchy on desktop and mobile, then copy fixed rem or fluid CSS clamp() variables.
A font hierarchy assigns repeatable sizes to body text, labels, section headings, and page headings. This generator calculates those sizes from a base size and ratio, shows the hierarchy on desktop and mobile, and exports the result as rem or CSS clamp() variables.
Start with the 16px / 1.25 example
Keep the default 16px body size and 1.25 ratio. Replace the preview sentence with your longest heading, then switch between desktop and mobile. If each role remains distinct and the heading avoids awkward breaks, open CSS and copy the variables.
Built and maintained by Maaz Rana. Updated .
Loading Typography Scale Generator...
Use the Scale in Production
See the calculation, then test the result against zoom, text spacing, and real content
Fluid Typography Guide
Choose type roles, responsive ranges, and a practical path from design decisions to CSS.
CSS clamp() Formula
Work from two sizes and two viewport widths to the final slope and intercept.
Accessibility Checklist
Test browser zoom, text-spacing overrides, wrapping, and fixed-height components.
Build a Font Hierarchy with a Type Scale
Give each text role a size the team can name and test
Visual Hierarchy
A type scale separates page headings, section headings, body copy, and labels. Readers can see the structure before they read each line.
Consistency
A ratio gives the team a repeatable starting set. You can test fewer sizes instead of choosing a new value for each screen.
Efficiency
Named type tokens let designers and developers refer to the same roles in the design file, component code, and documentation.
Accessibility
Relative units respect the browser root size. The layout must still survive 200% zoom, text-spacing overrides, and long content.
Fewer Exceptions
A small set of roles makes stray font sizes visible during review. Teams can fix the token or record a component-level exception.
Responsive Design
Fixed rem values work for stable roles. Bounded `clamp()` values can move display type between chosen mobile and desktop sizes.
Understanding Type Scales
See how the base size and ratio produce each step
A worked 16px / 1.25 hierarchy
A 16px body size with a 1.25 ratio produces 12.8px, 16px, 20px, 25px, and 31.25px. Map those sizes to a label, body, section heading, page heading, and display heading.
Use size = base × ration for each step. Remove a role when your product has no recurring use for it.
Check it with your longest copy
Paste the longest page heading into the preview. Check that the page heading leads, section headings remain distinct, and body copy stays comfortable at the chosen width.
Switch to mobile before export. Reduce the ratio or assign a smaller step when a heading falls into one-word lines.
Build the next release around the work users repeat
Test the hierarchy with real copy
Compare the longest heading and smallest label at desktop and mobile widths before you export the CSS.
Popular Scale Ratios Explained
Choose the distance you need between neighboring text roles
Minor Second
1.067This small ratio keeps neighboring sizes close. It can suit dense interfaces where headings should stay near the body size.
Best for: Seven or more closely spaced text roles
Major Second
1.125This ratio creates modest size changes. It leaves room for font weight and spacing to carry part of the hierarchy.
Best for: Body-led pages with several heading levels
Minor Third
1.200This ratio gives common web sizes such as 16, 19.2, 23, and 27.6 before rounding. Test those steps against your typeface and content.
Best for: Product interfaces with a moderate heading ladder
Major Third
1.250A 16px base produces 20px at the next step and 25px after that. The jumps suit products that need clear heading levels.
Best for: Four to six roles that need clear separation
Perfect Fourth
1.333The larger jump separates display sizes from body copy. Use fewer steps so top headings do not outgrow narrow screens.
Best for: Short heading ladders with prominent display text
Augmented Fourth
1.414The ratio equals the square root of two. It creates wider gaps that suit short heading ladders and display-led pages.
Best for: Two or three display roles above body copy
Perfect Fifth
1.500Each step grows by half of the previous value. The scale reaches large display sizes after a few steps, so mobile bounds matter.
Best for: Headline-led pages with few intermediate roles
Golden Ratio
1.618This 1.618 ratio creates the widest jumps in the preset list. Reserve it for a short set of display roles and test the line breaks.
Best for: A small set of large display roles
Best Practices for Typography
Test sizes, line heights, contrast, and wrapping together
Limit Your Choices
Choose the roles your product needs, then map one token to each role. Remove generated steps that have no job.
Use a Ratio
Use the ratio as a starting point. A 1.2 ratio keeps sizes close; a 1.5 ratio creates large display steps.
Responsive Adjustments
Set separate mobile and desktop bounds for display roles. Keep body and control text stable unless the content test supports a change.
Check Contrast
Typography scale is only effective if users can actually read it. Use our Color Contrast Checker to ensure your text colors meet WCAG standards. Smaller text needs higher contrast ratios than large text.
Pair with Font Weight
Test size with the weights available in the chosen typeface. Weight, spacing, and placement also shape hierarchy.
Document Your System
Document each role beside a real component and its code token. Teams need usage rules as well as a size table.
Common Typography Mistakes
Avoid these pitfalls when designing type systems
Too Many Font Sizes
Values such as 13px, 14px, and 15px often represent roles the team has not named. Map each use to a token or record the exception.
Ignoring Line Height
Tight line height makes long text harder to track. Start near 1.5 for body copy, then test the typeface and line length.
Poor Mobile Scaling
A desktop display scale can create one-word lines on a phone. Set mobile bounds and test the longest headings.
Using px Units
Pixel font sizes do not follow the browser root font setting. Use rem for type tokens, then check browser zoom and text resizing.
From Scale to Design System
Connect type roles to color, spacing, components, and documentation
A type scale needs matching color tokens, spacing rules, and components. Connect each role to the design library and production code, then document the cases that break the rule.
Color System
Pair each text role with a semantic color token and verify the contrast for its size and weight.
Spacing Scale
Test heading margins, paragraph gaps, and component padding beside the final line heights and content lengths.
Component Library
Connect type roles to reusable components and rich-text styles so pages use the same tokens.
Responsive Strategy
Choose fixed steps, bounded fluid values, or breakpoint changes for each role. Document the chosen behavior beside the token.
Documentation
Show each level in a real interface and include the matching token. Record edge cases such as long labels and translated copy.
Accessibility
Use semantic HTML, relative units, sufficient contrast, and layouts that keep content available after zoom and text-spacing changes.
Sources used in this guide
MDN documents the CSS clamp() function and its accessibility considerations. W3C requires text to remain usable at 200% resize and after the text-spacing override.
Frequently Asked Questions
Name the text roles your product repeats: body, label, section heading, and page heading. Set the body size, choose a ratio, and assign one generated step to each role. Preview the longest real copy on desktop and mobile, then remove any size that has no defined role.
A modular type scale multiplies a base font size by a fixed ratio at each step: fontSize = baseSize × ratio^n. With a 16px base and a 1.25 ratio, the next sizes are 20px and 25px. Steps below the base divide by the ratio. The generator calculates the full set from the base, ratio, and number of levels.
Choose the ratio by the number of roles and the size difference they need. Ratios from 1.125 to 1.25 suit products with several text levels. Ratios from 1.333 to 1.5 suit shorter, display-led scales. Start with 1.25, preview real headings and labels, then change the ratio if two roles look too similar or one grows too large.
Start with the browser default of 16px, then test the typeface, line length, and reading context. A content-heavy page may need a larger body size. A dense interface may use a smaller label size while keeping body copy readable. WCAG does not set one minimum font size, so verify zoom, contrast, and reflow instead of relying on one number.
Use one size for each recurring role in the product. Many systems need body copy, labels, supporting text, section headings, and one or two page-heading sizes. Generate more steps if you need them, then remove the ones with no defined role.
Fixed rem tokens suit body copy, controls, and other roles that should stay stable. Fluid `clamp()` values suit headings that need different bounds on narrow and wide screens. The generator exports both. Test the fluid result at its endpoints, at 200% zoom, and inside the longest component copy.
Start with a tighter line height for short display headings and more space for multi-line body copy. Values near 1.1 to 1.3 can suit headings; body copy often starts near 1.5. Test the chosen typeface, width, and language. WCAG 1.4.12 also requires the layout to survive a user override to 1.5 line height without losing content or controls.
Yes. A wide desktop scale can create poor line breaks on a phone. The fluid export uses your chosen base and ratio at 1440px, then derives a smaller base and ratio for the 320px bound. Choose fixed rem values with breakpoint changes when you need independent control. Check both previews with real content before copying the CSS.
Need the Type Scale to Hold Up in a Real Product?
Typography has to work across components, breakpoints, content lengths, and code. Share the product and where the current system starts to break.
Discuss the Type System