Basic typography rules make text easier to scan, read, and trust. Start with hierarchy, contrast, spacing, and readable body copy; decorative choices come later. Once you know the rules, test your design eye with the typography quiz, which asks practical questions about fonts, spacing, type anatomy, and common typesetting terms.
1. Establish a clear hierarchy
Hierarchy tells readers where to begin and what matters next. Your page title, section headings, labels, and body copy should look like distinct levels rather than variations chosen one at a time.
Use a small, repeatable scale. For example:
- H1: 40 px
- H2: 28 px
- H3: 20 px
- Body: 16 px
- Caption: 13 px
The precise values can change, but the difference between levels must be visible. A 17 px subheading above 16 px body text is technically larger but usually too weak to guide a quick scan.
Quick judgment: Can someone identify the title, section headings, and main text after a two-second glance? If not, strengthen the hierarchy.
2. Use contrast to show different roles
Contrast separates one text role from another. Size and weight are often the most dependable signals; color, case, style, and spacing can support them.
A regular 16 px paragraph followed by a medium 17 px heading leaves readers guessing. A 24 px semibold heading above the same paragraph creates a clearer break. Do not make every heading bold, oversized, colored, and capitalized at once. When every element demands attention, the page loses its reading order.
Quick judgment: A page uses several heading colors, but all headings are the same size and weight. Does it have strong hierarchy? Usually no. Color can help, but it rarely replaces a meaningful difference in scale or weight.
3. Make body text comfortable before making it stylish
For many screens, 16 px is a useful starting point for body copy. It is not a law: a typeface with a small x-height may need more size, while dense interface text may need less.
Check body text in context. Readability depends on letterforms, foreground-to-background contrast, line length, line-height, and the device where people will read it. Light gray text may look restrained in a mockup but become tiring in a long article.
When a choice creates tension between fashion and legibility, protect the reader first.
4. Give paragraphs enough line-height
Line-height, also called leading, is the vertical distance from one line of text to the next. Headings can often be tight because they are short. Paragraphs need more room so each line remains distinct.
For body copy, a line-height around 1.4 to 1.7 times the font size is a practical place to start. A 16 px paragraph might therefore use about 22 px to 27 px of line-height.
Too little leading turns a paragraph into a dense gray block. Too much makes each line feel disconnected from the one before it.
Quick judgment: Cover the lower half of a paragraph, then uncover it. Can your eye find the next line without effort? If not, inspect the leading and column width.
5. Control line length
Long lines make the return trip from the end of one line to the start of the next harder. Extremely short lines create a choppy rhythm and make paragraphs look fragmented.
A useful general range for body text is roughly 45 to 75 characters per line, including spaces. Treat it as a starting point, not a rigid target: mobile layouts, narrow sidebars, and editorial columns call for different measures.
If a desktop text column is too wide, do not immediately reduce the font size. Restrict the column width first. Smaller text often solves the layout problem by creating a reading problem.
6. Align text for the reading task
Left-aligned text is usually the easiest choice for extended English reading because the starting edge stays predictable. Center alignment works well for short, self-contained text such as a title, invitation, or compact callout.
Avoid centering long paragraphs. The shifting left edge makes it harder to locate each new line. Justified text can create a formal page texture, but it can also create distracting gaps between words. If you justify text, inspect it at the size and width readers will actually see.
Alignment is not decoration. It determines how readers move through a block of text.
7. Use one or two type families with intention
A simple design can work beautifully with one family. If that family includes regular, bold, italic, and several weights, it can handle headings, body copy, labels, and captions without looking repetitive.
Two families can work when each has a clear job: perhaps a display face for headings and a highly readable face for paragraphs. More families are not automatically more expressive; they often make a page feel assembled instead of designed.
For a focused guide to this decision, see Font Pairing Rules: 8 Simple Principles for Better Typography.
8. Pair fonts by role, not novelty
A good font pairing creates useful contrast without visual competition. Begin with function: which typeface will carry long reading, and which will introduce the page?
A display serif and a neutral sans serif often work because their roles are distinct. Two decorative display faces often compete. Two almost-identical sans serifs can be equally awkward because readers notice a difference without understanding why it exists.
Before committing, compare letters and characters that reveal a typeface’s personality: a, g, 1, I, punctuation, and numerals. A pairing may look fine in a short specimen but fail in data, navigation, or body copy. If you need examples built around a familiar default face, these Calibri font pairings show how role and contrast work together.
9. Treat bold as a signal, not a texture
Bold type directs attention. Reserve it for headings, labels, key terms, and the occasional point readers must find quickly.
When several phrases in every paragraph are bold, nothing remains special. First ask whether the sentence can be rewritten so its key idea lands naturally. Add bold only when scanning genuinely benefits.
Also make sure the font includes a real bold weight. Artificially emboldened text can distort the letterforms and look clumsy, especially at smaller sizes.
10. Use spacing to show what belongs together
Whitespace is part of typography. The space around text tells readers which items form a group and where one idea ends.
A heading should sit closer to the paragraph it introduces than to the previous section. Related labels and fields should stay close; separate groups need a larger gap. This principle is often called proximity, but the useful question is simpler: what should the reader see as one unit?
Define a small set of spacing values and reuse them. Random blank lines make a layout feel accidental even when the type choices are sound.
11. Avoid overusing all caps, italics, and underlines
All caps can suit short labels, especially with a little extra letter spacing. In long passages, its uniform word shapes slow reading.
Italics work for light emphasis, titles, and occasional terms, but long italic paragraphs are hard to read. Underlines usually indicate links on the web, so using them for ordinary emphasis can confuse readers.
Choose the emphasis treatment that fits the job. Do not stack bold, italics, all caps, color, and underlining on the same phrase.
12. Check consistency before adding flair
Consistency prevents accidental visual noise. Before adding a decorative accent, review repeated elements:
- Do headings at the same level share the same size, weight, and spacing?
- Do links look consistent throughout the page?
- Is paragraph spacing uniform?
- Does a particular weight mean the same thing every time?
- Are quotation marks, dashes, captions, and lists treated consistently?
A flourish can be memorable, but it should sit on top of a stable reading system. If the hierarchy fails in plain text, a gradient or accent color will not repair it. For a broader practice-oriented foundation, read Typography Basics for Beginners: The Rules You Can Practice.
A five-minute typography review
Use this pass before publishing a page, slide deck, or resume:
- Blur your eyes slightly. The hierarchy should still be visible.
- Read one paragraph at normal viewing distance. Notice its size, contrast, width, and leading.
- Scan headings only. Their levels should be obvious without reading the body copy.
- Check a narrow screen and a wide screen.
- Remove one decorative treatment. If the page improves, it was not earning its place.
Then take the typography quiz to practice the vocabulary behind those decisions, including typeface versus font, kerning versus tracking, serifs, widows, orphans, and dashes.
FAQ
What are the most important basic typography rules?
Start with hierarchy, readable body text, adequate line-height, sensible line length, deliberate alignment, and consistent spacing. Font pairing matters, but one well-used family is better than two poorly matched ones.
How many fonts should I use in one design?
One or two families is usually enough. Add another only when it has a distinct, controlled role that improves the reading system.
What line-height should I use for body text?
Around 1.4 to 1.7 times the font size is a useful starting range. Test it with the actual typeface and column width because different letterforms need different amounts of room.
Is centered text bad typography?
No. It works well for short, self-contained text. It becomes difficult to read in long paragraphs because each line begins in a different place.
How do I improve my typography eye?
Compare alternatives and explain your choice in plain language. Ask what readers see first, what belongs together, and where the eye goes next. Repeated judgment practice turns rules into instincts.
Conclusion
Basic typography rules are about making the reader’s path obvious. Build a clear hierarchy, use contrast with purpose, give text enough space, and keep repeated elements consistent. Once those relationships become familiar, you can make faster, better design calls.