What is a modular type scale?

A modular type scale is a sequence of harmonious font sizes generated by multiplying or dividing a base font size (like 16px) by a fixed mathematical ratio—such as 1.25 (Major Third) or 1.333 (Perfect Fourth). This produces consistent, natural visual rhythm across all heading levels.

Which type scale ratio is best for web design?

For general marketing websites and blogs, Major Third (1.25) or Minor Third (1.20) provides an ideal balance of distinction and compact density. For dense SaaS dashboards and complex tables, Minor Second (1.067) or Major Second (1.125) prevents oversized headings from consuming limited screen real estate.

Modular Typography Scale Generator

Design mathematically harmonious type systems. Select base sizes, explore optical ratios, and export instant CSS custom properties and Tailwind configuration tokens.

Modular Typography Scale Generator

Calculate proportional type scales and export CSS/Tailwind tokens.

Base Size16px (1.000rem)

Ratio: 1.25

Preview Typeface

Display Heading.display

2.444rem · 39.1px

The Future of Typography

Heading 1.h1

1.956rem · 31.3px

Harmonious Type Hierarchy

Heading 2.h2

1.563rem · 25px

Structural Contrast and Rhythm

Heading 3.h3

1.25rem · 20px

Legibility Across Screen Resolutions

Body / Base.base

1rem · 16px

Good typography builds trust and makes reading effortless.

Small / Secondary.small

0.8rem · 12.8px

Captions, author bylines, and secondary metadata notations.

Caption / Micro.micro

0.638rem · 10.2px

Legal disclosures, footnotes, and fine print.

Why Mathematical Modular Scales Matter

Eliminate arbitrary font sizes by grounding your design hierarchy in mathematical proportions.

Harmonious Rhythm

Every level in the hierarchy relates by an exact ratio, instilling subconscious order.

Token Velocity

Export tokens directly to Tailwind or CSS custom properties for single-source-of-truth syncing.

Responsive Scaling

Adjust the root base size (14px mobile vs 16px desktop) and the entire scale adapts fluidly.