Typography basics every non-designer should know

Typography is the part of web design that non-designers most often either ignore completely or overcorrect on — either every heading is the same size as the body text, or the site uses five different fonts because they all looked nice individually in a font picker. Neither extreme is really about taste. Both come from not knowing the handful of rules that make text feel organized instead of arbitrary.

You don't need a design degree for this. You need to understand five ideas: scale, hierarchy, line length, line height, and restraint. Here's each one in plain English.

Type scale: sizes should follow a pattern, not a guess

A type scale is a small set of font sizes used consistently across a site — for example, one size for body text, one or two sizes for subheadings, one larger size for main headings, and maybe one small size for captions or labels. The specific numbers matter less than the fact that there's a small, fixed set of them, reused everywhere, instead of every heading on the page being sized by eye.

Good templates already ship with a scale like this built into their CSS. The mistake to avoid when customizing one is introducing a size that isn't in the scale because "it looked a little small" on one particular heading — that one-off size is what starts to make a page feel inconsistent.

Hierarchy: size should match importance

Hierarchy is simply making sure the most important text is visually the most prominent, and everything else steps down from there in a logical order. A page where the section heading and the body text are nearly the same size forces a reader to work harder to figure out what to read first — even if they can't articulate why the page feels off, they'll feel it.

Line length: not too wide, not too narrow

Line length is how many characters fit on a single line of body text before it wraps. Lines that are too wide — text stretching the full width of a large desktop screen — force a reader's eyes to travel a long way and make it easy to lose their place when jumping to the next line. Lines that are too narrow feel choppy and interrupt reading rhythm. The comfortable range for body text is roughly 50 to 75 characters per line, including spaces.

This is why well-designed sites constrain their text columns with a maximum width instead of letting paragraphs stretch edge-to-edge on a wide monitor — it's not a stylistic choice, it's a readability one.

Line height: give text room to breathe

Line height (sometimes called leading) is the vertical space between lines of text. Too tight, and lines feel cramped and are harder to track; too loose, and paragraphs feel disconnected and take up more space than they should. A common, safe starting point for body text is a line height of about 1.5 times the font size — so 16px text gets roughly 24px between baselines.

Headings generally want a tighter line height than body text, since they're usually short and don't need the same breathing room a multi-line paragraph does.

Font pairing: one or two families, not four

The most common typography mistake on DIY sites is using too many font families — a decorative script for the logo, a different sans-serif for headings, a serif for body text, and a monospace font somewhere for "technical" flair. Each one might look fine in isolation. Together, they make a page feel like it was assembled from unrelated pieces rather than designed as one thing.

One font family, used consistently at different weights and sizes, is enough for most sites. Two works well when one is used for headings and a different, complementary one for body text — but the moment you're reaching for a third, stop and ask what problem it's actually solving.

Contrast: dark enough text on a light enough background

Low-contrast text — light gray on white, for example — looks stylish in a mockup and is genuinely hard to read on a real screen, especially outdoors or for anyone with less-than-perfect vision. This isn't a stylistic nuance, it's an accessibility requirement with a measurable standard (WCAG contrast ratios), and it's one of the easiest things to check with a free browser tool before publishing.

What to actually change when customizing a template

Most templates already get all of the above right out of the box — that's a large part of what you're paying for. When customizing one, the safest typography changes are picking a font pairing that matches your brand and adjusting a color or two. The riskiest changes are overriding font sizes on individual elements, adding an extra font family, or fighting the built-in line height — all of which quietly undo the work already done for you.

1. 1
   Keep the existing type scale

   Use the sizes already defined rather than introducing new ones by eye.
2. 2
   Swap fonts, don't add more

   Replace the existing font choice with your brand's, rather than layering a new one on top.
3. 3
   Check contrast after any color change

   A brand color that looks great as an accent can be unreadable as body text.
4. 4
   Leave line height and line length alone

   These are usually tuned correctly already — don't widen a text column just because there's empty space next to it.

• ✓Use a small, consistent type scale instead of sizing headings by eye.
• ✓The most important text should look the most important — that's hierarchy.
• ✓Body text reads best at roughly 50–75 characters per line.
• ✓A line height of about 1.5x the font size is a safe default for paragraphs.
• ✓Stick to one or two font families, and check contrast after any color change.