Typography Tool

Generate a modular type scale, preview Google Fonts in real time, and export CSS custom properties.

Font Settings
Type Scale
Step Size Preview
Live Preview
The Art of Good Typography
Why type scale matters in modern design
Typography is the craft of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters.

Click any text above to edit it.

CSS Export

Typography Tool — Tips & Guide

Use the type scale generator to create harmonious font sizes for your next project, then export the CSS variables directly into your stylesheet.

Choosing a Type Scale

Perfect Fourth (1.333) is a reliable all-rounder for UI. Use Golden Ratio (1.618) for editorial or marketing pages where dramatic contrast reads well.

Pairing Fonts

Combine a geometric sans-serif (Inter, DM Sans) for body copy with a high-contrast serif (Playfair Display) for headings to add visual hierarchy without adding color.

Line Height for Readability

Body text reads best at 1.5–1.7. Tighten headings to 1.0–1.15. Never apply a single global line-height to both — they need different values.

Letter Spacing

Apply negative letter-spacing (−0.02 to −0.04em) on large display headings. Small labels and ALL-CAPS text benefit from slight positive tracking (0.05–0.08em).

A type scale is a set of font sizes calculated by multiplying a base size by a consistent ratio. For example, a base of 16px with a Perfect Fourth ratio (1.333) gives you sizes like 12px, 16px, 21px, 28px, 37px, and so on — all mathematically related so they feel harmonious together.
The golden ratio (1.618) is a mathematical proportion found throughout nature and art. When used as a type scale ratio it creates highly dramatic size jumps between steps — great for landing pages and editorial layouts, but often too aggressive for dense UI or long-form reading interfaces.
16px is the browser default and a well-tested starting point for body copy on desktop. For mobile, 16px also prevents iOS Safari from auto-zooming inputs. If your users are in accessibility-sensitive contexts, consider 18px as a base. Avoid going below 14px for primary body text.
In CSS, line-height controls the space between lines of text. A unitless value like 1.6 means the line height equals 1.6× the element's font size. Unitless values are preferred because they scale correctly when the font size changes, unlike fixed pixel or em values.