Responsive Typography Scaler

What is a modular typography type scale?

A type scale uses a set geometric mathematical ratio (like 1.25 for Major Third) to size headings. This provides clean visual harmony across desktop and mobile devices.

How can I use these scales in my CSS files?

Click Copy CSS Variables to copy custom root selectors declaring fluid sizes mapped to heading styles for immediate use.

What is the best type scale ratio for web design?

Major Third (1.25) and Perfect Fourth (1.333) are the most commonly used ratios in web design — Major Third gives a refined, elegant hierarchy suited to editorial or content sites, while Perfect Fourth creates a bolder, more dramatic contrast ideal for marketing pages and landing pages.

What base font size should I use for a typography scale?

16px is the standard starting point since it's the default browser font size and provides comfortable reading at typical viewing distances — some designers use 18px for content-heavy sites, but 16px remains the most reliable baseline for most projects.

Should body text be included in the type scale, or set separately?

Body text should be a fixed step within the scale, usually the anchor point that every other size (headings and captions) is derived from — treating body text as separate from the scale breaks the mathematical relationship and makes future adjustments harder.

Why use rem instead of px for a typography scale?

Rem units scale relative to the user's browser font-size settings, so if someone increases their default size for accessibility, all rem-based text scales proportionally — pixel values stay fixed regardless of user preferences, which can hurt accessibility.

How does a modular type scale improve design consistency compared to picking font sizes manually?

Without a scale, designers often pick arbitrary sizes — 14px here, 17px there, 22px elsewhere — which creates visual inconsistency. A modular scale generates every size from one base and one ratio, so all headings and text sizes share a mathematical relationship, producing natural visual harmony automatically.

What is the difference between Major Third, Perfect Fourth, and Golden Ratio type scales?

Major Third (1.25) creates a subtle, refined hierarchy; Perfect Fourth (1.333) creates a clearer, more noticeable contrast good for most web interfaces; and Golden Ratio (1.618) produces the most dramatic size differences, best suited for bold landing pages or marketing-focused designs.

Can I use the same ratio for spacing, not just font sizes?

Yes, many design systems derive spacing values (margins, padding, gaps) from the same ratio as their typography scale, creating a unified visual rhythm across both text and layout.