Typography Design Guide: Pairing, Scale, Rhythm

The fastest way to spot an amateur website is to look at the typography. Not the fonts themselves — there are plenty of free, high-quality fonts available — but the sizes, the line heights, the spacing between paragraphs, the contrast against the background. A site with great typography can use Arial and still feel deliberate. A site with bad typography can use a $300 foundry typeface and still feel like a Word document.

Typography is mostly a small set of decisions made consistently. This guide walks through how to pick fonts that work together, build a type scale that guides the eye, set line heights and spacing that make long passages readable, and meet the accessibility rules that keep your site usable for people with low vision.

Pairing fonts without pain

The safest rule in font pairing is to use one font. Most websites do not need two. A single well-chosen typeface with weight and size variation handles headings, body, and UI. Google Fonts alone has several hundred fonts that will carry an entire site. Browse the catalog at Google Fonts — the filters for variable fonts, number of styles, and popularity let you narrow down quickly.

If you do want two fonts, the conventional advice works: pair a serif with a sans-serif, or a display face with a workhorse body face. The important rule is that they should feel like they come from the same design era or the same family of design intent. A modern geometric sans (like Inter) with a modern geometric serif (like Fraunces) works. A modern sans with a Victorian display face does not, unless you are being very deliberate about the clash.

Three warnings:

• Do not use more than two typefaces. Three is where reading speed collapses. The page feels busy and readers cannot form a mental hierarchy.
• Weight is its own variable. A single typeface with three weights (400, 600, 800) reads as a hierarchy. You rarely need a second font to create distinction.
• Test at real sizes. A font that looks amazing at 48px may be unreadable at 14px. Preview everything at body size before committing.

Use Font Pairing Generator to explore combinations that other designers have used successfully, and Font Previewer to see how a typeface behaves at multiple sizes and weights before you commit to loading it.

Building a type scale

A type scale is a ratio-based sequence of sizes that governs every piece of text on the site. Instead of picking sizes arbitrarily (14, 16, 18, 22, 28), you pick a base size and a ratio and derive the rest. Common ratios: 1.125 (major second), 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth), 1.414 (augmented fourth), 1.5 (perfect fifth), 1.618 (golden ratio).

Pick a base body size, usually 16px or 18px. Multiply up for larger sizes, divide down for smaller. With a 1.25 ratio and a 16px base, you get 12.8, 16, 20, 25, 31.25, 39.0625. Round those to sensible CSS values and you have a six-step scale.

The mistake most new designers make is picking a ratio that is too small. A 1.125 scale barely differentiates sizes; the hierarchy fades. For most websites, 1.25 to 1.333 is a good range. For content-heavy sites with a lot of text hierarchy, 1.2 is common.

Use CSS Unit Converter when converting between px, rem, and em as you apply the scale to CSS variables. Modern CSS makes rem-based scales easy: set the :root font-size, define every heading in rem, and the whole scale adjusts to user font size preferences.

Line height and vertical rhythm

Line height (CSS line-height) is the space between the baselines of consecutive lines of text. It is the single biggest lever for making long-form text comfortable. Too tight and the eye cannot find the next line. Too loose and the paragraph dissolves into floating fragments.

Rules of thumb:

• Body text: line-height between 1.5 and 1.75. Never less than 1.5 for paragraphs meant for reading.
• Headings: tighter, 1.1 to 1.3. Headings are usually one or two lines and benefit from visual compactness.
• UI labels: 1.25 to 1.4, matching the interface density.
• Captions and small text: slightly looser than body, around 1.6, because smaller text needs more breathing room.

Vertical rhythm is the consistent vertical spacing between text blocks. If every element aligns to a common baseline grid (say, 8px steps), the page feels calm and ordered. If spacing is ad-hoc, the page feels jumbled even if every individual element is well-styled. CSS custom properties make rhythm maintainable: define a spacing scale once and reuse it.

Line length, the invisible constraint

A line of text that is too long makes reading exhausting — the eye has to track back across the page to find the next line. Too short and reading becomes a series of rapid jerks. The sweet spot is 45 to 75 characters per line. For web body text, this is the most cited number in typography, and it is correct.

In CSS, you enforce measure with max-width, typically set with the ch unit: max-width: 65ch. The ch unit is the width of the "0" character in the current font, which is a reasonable proxy for character count. A paragraph of 65ch rendered in 16px body text is about 650 pixels wide, which matches common content column widths.

This is one of the reasons pages with full-width prose feel wrong. Even if the content is good, reading a paragraph that stretches 1,400 pixels wide on a monitor is painful. Constrain the measure.

Accessibility and contrast

The WCAG 2.2 guidelines set specific contrast ratios for text: 4.5:1 for normal body text, 3:1 for large text (18pt or 14pt bold and larger), and 3:1 for UI components. AAA level raises those to 7:1 and 4.5:1 respectively. Normal websites target AA; sites with legal accessibility requirements may target AAA.

The ratios are not subjective. They come from luminance math that approximates perceived brightness difference. Use Color Contrast Checker to test text-background pairs before committing them to a design system. A color combination that looks fine to you at full brightness may fall below 4.5:1 for a user with reduced vision.

Beyond contrast, accessibility concerns that affect typography:

• Minimum body size. Do not set body text smaller than 16px. 14px was briefly fashionable and should not be.
• Respect user font size preferences. Use rem units so that users who have increased their browser font size see larger text, not just a bigger viewport.
• Avoid all-caps body text. Screen readers sometimes read it letter by letter. Use text-transform: uppercase for visual effect on short headings only.
• Do not disable user zoom. Users have reasons to zoom. Do not set user-scalable=no in the viewport meta.

The WebAIM resources are the best independent reference for practical accessibility decisions, including the well-known contrast checker at webaim.org/resources/contrastchecker.

Responsive typography

A headline that reads well at 40px on a desktop is too big at 40px on a phone. Responsive typography scales sizes with the viewport. The old way was media queries that changed font-size at breakpoints. The new way is fluid typography with CSS clamp(), which interpolates smoothly between a minimum and a maximum size.

A typical fluid heading:

h1 { font-size: clamp(2rem, 1rem + 3vw, 3.5rem); }

This sets the h1 to 2rem minimum, 3.5rem maximum, and scales linearly with viewport width in between. No media queries, no jumps at breakpoints.

Before applying fluid sizing to every element, test it on real devices. Fluid sizes that look great on modern phones can look cramped on older screens and ridiculous on ultra-wide monitors. The clamp() bounds exist to keep those edge cases sane.

Adjacent tools worth bookmarking

Tools that pair with typography work: CSS Minifier to trim the stylesheet that ships to production, Color Picker for setting exact text and background values, Color Palette Generator for building a palette that pairs with your type choices, and Google Fonts Previewer to preview a font without going to fonts.google.com for every lookup.

Related pillar guide

This cluster is part of the design and frontend track. For the broader reference on browser-based tools for designers, see The Complete Guide to Free Online Tools in 2026.

FAQ

Is serif or sans-serif better for body text online?

Both work. Modern screens have high enough resolution that serifs render cleanly, reversing the old wisdom that sans-serif was better for screens. Pick whichever fits the brand and is optimized for screen rendering at body size.

How many fonts should my site load?

One or two font families, two to four total weight+style combinations. Every additional font file is a performance cost. Variable fonts reduce this to a single file per family.

Should I use pixels or rems for font size?

Rems, so that users who have increased their default font size get larger text. Setting the body in px locks out that preference.

What is the golden ratio for type scales?

1.618. It is one of several attractive ratios, not uniquely better. For UI-heavy applications, smaller ratios (1.2, 1.25) are usually more practical because they keep sizes compact.

Do I need a design system for typography?

If more than one person maintains the site, yes. A documented scale, line-height, and weight table prevents drift. If you are the sole author, CSS custom properties serve the same purpose.

Closing thought

Typography is not the part of design that screams for attention. It is the part that, when wrong, makes everything else look wrong, and when right, fades into the background so the content can do its job. Spend an afternoon on the scale, the line height, and the contrast, and you will not have to think about typography again for months.