Typography Scale Calculator: Font Sizes That Fit

Most developers pick font sizes by feel. The heading looks too small? Make it bigger. The caption looks too big? Make it smaller. This works for a single page, but it creates problems at scale. Every page has slightly different sizes, nothing looks intentional, and the design feels off without anyone being able to point to exactly why.

A typographic scale solves this by giving you a fixed set of font sizes derived from a mathematical ratio. Instead of choosing sizes arbitrarily, you pick a base size and a ratio, and the scale generates every size you will need. The result is a set of sizes that have a natural visual relationship because they are all proportional to each other.

This is not a new idea. Typographic scales have been used in print design for centuries. The classic scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) was established by typographers who figured out through centuries of practice which sizes look good together. Modern web design has adapted this concept using mathematical ratios that generate similar harmonious progressions.

Popular Typographic Ratios and When to Use Them

A typographic scale starts with a base size (usually your body text size, like 16px) and multiplies by a ratio to get each subsequent size.

Minor Second (1.067): Very subtle size changes. Good for dense interfaces where you need many distinct levels but do not want dramatic size jumps. Dashboard UIs, data-heavy applications.

Scale at 16px base: 16, 17.07, 18.22, 19.44, 20.75...

Major Second (1.125): Slightly more noticeable steps. Works well for editorial content where you want gentle hierarchy. Blog layouts, documentation.

Scale at 16px base: 16, 18, 20.25, 22.78, 25.63...

Minor Third (1.2): A popular choice for web design. Enough contrast between levels to create clear hierarchy without being jarring. General-purpose websites, corporate sites.

Scale at 16px base: 16, 19.2, 23.04, 27.65, 33.18...

Major Third (1.25): Slightly more dramatic. Good for marketing pages and content-focused sites where headings need to stand out.

Scale at 16px base: 16, 20, 25, 31.25, 39.06...

Perfect Fourth (1.333): Strong hierarchy. The jump from body to heading is immediately noticeable. Works well for landing pages and sites with a clear primary heading.

Scale at 16px base: 16, 21.33, 28.43, 37.90, 50.52...

Golden Ratio (1.618): Very dramatic size jumps. Best for designs with few text levels (body and one or two heading sizes). Magazine covers, hero sections.

Scale at 16px base: 16, 25.89, 41.89, 67.77...

The Font Size Converter converts between px, rem, em, and pt, which is useful when your design tool uses one unit and your CSS uses another.

Implementing a Type Scale in CSS

The cleanest way to implement a typographic scale is with CSS custom properties. Define the sizes once, use them everywhere.

`css :root { --font-size-base: 1rem; / 16px / --font-size-sm: 0.875rem; / 14px / --font-size-xs: 0.75rem; / 12px / --font-size-lg: 1.25rem; / 20px / --font-size-xl: 1.563rem; / 25px / --font-size-2xl: 1.953rem; / 31.25px / --font-size-3xl: 2.441rem; / 39.06px / --font-size-4xl: 3.052rem; / 48.83px / }

body { font-size: var(--font-size-base); }

h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } `

This example uses a Major Third (1.25) scale. Every size is the previous size multiplied by 1.25.

Using rem units ties everything to the root font size, which means users who have changed their browser's default font size get proportionally scaled text. This is both an accessibility best practice and a practical advantage because your entire type system scales uniformly.

For responsive design, you can adjust the base size at different breakpoints and the entire scale adjusts automatically:

`css :root { --font-size-base: 0.9375rem; / 15px on mobile / }

@media (min-width: 768px) { :root { --font-size-base: 1rem; / 16px on tablet+ / } }

@media (min-width: 1200px) { :root { --font-size-base: 1.0625rem; / 17px on large screens / } } `

Line Height: The Other Half of the Equation

Font size without proper line height is only half the typographic picture. Line height (or leading, in print terminology) is the vertical spacing between lines of text. Too tight and lines blend together. Too loose and paragraphs feel disconnected.

General guidelines:

Body text: line-height of 1.5 to 1.7 (relative to font size). This gives enough breathing room for sustained reading. 1.5 is the WCAG minimum for accessibility.

Headings: line-height of 1.1 to 1.3. Headings are shorter (often one line) and look awkward with too much vertical space, especially multi-line headings where the lines should feel connected.

Small text: line-height of 1.4 to 1.6. Captions and labels at small sizes need slightly more relative spacing because the characters are harder to distinguish.

The relationship between font size and line height is not linear. As font size increases, the line-height ratio should generally decrease. A 16px paragraph at 1.6 line-height works well. A 48px heading at 1.6 line-height has enormous gaps between lines.

The Line Height Calculator computes optimal line heights for any font size, helping you maintain comfortable reading rhythm across all text sizes in your design.

In CSS, use unitless values for line-height:

`css body { line-height: 1.6; } h1, h2, h3 { line-height: 1.2; } small { line-height: 1.5; } `

Unitless values inherit proportionally to the element's own font size. Using fixed units (px) or even em/rem for line-height causes unexpected behavior when font sizes change.

Letter Spacing and Word Spacing

After font size and line height, letter spacing (tracking) is the third lever for typographic quality. Most fonts are designed with letter spacing optimized for body text sizes. When you use them at significantly larger or smaller sizes, the default spacing may not look right.

Headings (large text): Slightly tighter letter spacing often looks better. At large sizes, the default spacing between letters can feel too open. A value of -0.01em to -0.03em tightens things up without making characters collide.

`css h1 { letter-spacing: -0.02em; } `

Body text: Leave at default. Font designers spent considerable effort on the default spacing. Adjusting letter spacing on body text rarely improves readability.

Small text and uppercase: Slightly wider letter spacing improves readability. At small sizes or in ALL CAPS, characters can blur together. Adding 0.02em to 0.05em of spacing helps.

`css .label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; } `

Word spacing is adjusted less frequently but can help with fully justified text. If your justified text has large gaps between words, increasing letter spacing slightly and reducing word spacing can improve the appearance.

The Letter Spacing Tool lets you preview different letter spacing values visually. This is more intuitive than guessing values in CSS, because small changes in letter spacing are hard to evaluate without seeing them side by side.

Building a Complete Type System

A type system is more than a list of font sizes. It is a complete set of text styles that covers every use case in your design, with each style defined as a combination of font family, size, weight, line height, letter spacing, and color.

A practical type system for a web application might include:

• Display (3-4 sizes): Hero headings, marketing pages
• Heading (4-6 sizes): H1 through H6
• Body (2-3 sizes): Regular, small, large body text
• Label (2 sizes): Form labels, button text, navigation
• Caption (1-2 sizes): Photo captions, footnotes, helper text
• Code (1-2 sizes): Inline code and code blocks

For each style, define the complete set of properties:

`css .text-heading-1 { font-family: var(--font-heading); font-size: var(--font-size-4xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-text-primary); }

.text-body { font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--color-text-secondary); } `

Document these styles in your design system (Figma, Storybook, or a simple page that shows all text styles). When every developer uses the same named styles instead of picking ad-hoc font sizes, your entire application maintains consistent typography.

FAQ

What base font size should I use for web design?

16px (1rem) is the browser default and the most widely used base size. It is large enough for comfortable reading on both desktop and mobile screens. Some design-heavy sites use 18px or even 20px as their base, which works well for long-form content where readability is the primary goal.

Should I use px or rem for font sizes?

Use rem. It respects the user's browser font size settings, which is important for accessibility. A user who has set their browser to 20px default font size has done so for a reason, and rem-based sizing honors that preference. Use px only for elements that should not scale (like icon sizes or border widths).

How many font sizes should a design system have?

Most design systems work well with 8-12 sizes in their scale. Fewer than 6 makes it hard to create distinct visual hierarchy. More than 15 becomes difficult to manage consistently across a team. The exact number depends on the complexity of your UI. A simple marketing site might need 6 sizes. A complex dashboard might need 12.

Can I mix typographic ratios in one project?

Technically yes, but it defeats the purpose. The point of a scale is that all sizes relate to each other through a consistent ratio. Mixing ratios creates visual inconsistency. If one ratio does not give you the sizes you need, try adjusting the base size or choosing a different single ratio rather than combining multiple ratios.