What is the golden ratio in typography?

The golden ratio (approximately 1.618) is a mathematical proportion found in nature and art. In typography, multiplying a font size by 1.618 gives a harmonious larger size, while dividing gives a smaller one. Applied consistently, it produces a visually balanced type scale.

How is line height calculated?

Line height is computed by multiplying the base font size by the golden ratio (1.618). For a 16px base, that yields ~26px (1.625 as a unitless multiplier). This proportion is widely considered the sweet spot for body text readability.

How is the optimal line width determined?

The optimal line width (measure) is calculated as the base font size multiplied by the golden ratio squared (1.618² ≈ 2.618), then by a characters-per-line constant. The result in pixels maps to roughly 60–75 characters per line, which is the typographic convention for comfortable reading.

Can I use these values directly in CSS?

Yes. The calculator outputs both pixel values and unitless/rem equivalents. The CSS snippet button generates ready-to-paste custom properties (CSS variables) for font sizes, line height, and max-width.

What base font size should I start with?

16px is the browser default and a solid starting point for body text. For dense UI (tables, sidebars) try 14px; for long-form reading try 18–20px.

Golden Ratio Typography Calculator

Name: Golden Ratio Typography Calculator
Availability: InStock
Author: Nham Vu

Enter a base font size and get the ideal line height, line width, and heading scale using the golden ratio (1.618).

Typography Settings

Base Font Size

Ratio

Output Unit

px rem em

Base Size

16px

Line Height

1.618

~26px

Optimal Width

680px

~65 chars/line

Heading Scale

Live Preview

Max width applied

The quick brown fox

Jumps over the lazy dog

Good typography starts with a solid base. When font sizes, line heights, and line widths are proportional to one another, text feels effortless to read. The golden ratio provides a proven mathematical basis for those proportions.

Caption text — smaller supporting copy.

CSS Variables

Copied!

Summary

Enter a base font size and get the ideal line height, line width, and heading scale using the golden ratio (1.618).

How it works

Enter your base body font size in pixels (default is 16px).
The calculator instantly applies the golden ratio (1.618) to derive line height and line width.
Review the heading scale — H1 through H4 — each stepped by the golden ratio.
Use the preview panel to see how the scale looks with real text.
Copy any individual value or the full CSS snippet to use in your project.

Use cases

Set harmonious body and heading font sizes for a new web design.
Find the right line height for a given font size to maximize readability.
Generate a modular type scale for a design system.
Validate existing typography choices against the golden ratio.
Quickly prototype readable text styles before committing to a CSS framework.
Teach typographic proportion principles to students or teammates.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu