Key Takeaways
-
To keep a design or page visually coherent and avoid creating a disjointed or strange impression, use no more than three typefaces in any one design or page.
-
Place headings prominently at the top of the page and use a body-text size of at least 14px for strong legibility and readability.
-
Maintain sufficient contrast between text and background, and avoid long passages in all caps because they are harder to read.
-
Use fonts not designed for screens with caution, and subset and cache web-font resources to reduce page weight. Comic Sans is not recommended because it is overused and visually weak.
For designers, typography is a common and essential task. We must respect the content while ensuring that it remains clear and readable. We should also provide visual cues that communicate relationships between pieces of text. These decisions give the text distinct qualities and help readers scan for specific information or read long passages comfortably.
For an experienced graphic designer, typesetting becomes instinctive, but a quick checklist can still ensure that the fundamentals are covered. It is especially useful for beginners entering the field. The following list provides a general set of guidelines:
1. Use No More Than Three Typefaces per Design or Page
Limiting a design to three typefaces—or digital fonts—is a useful basic rule. Too many typefaces, even when they are similar, create dissonance. Readers sense that text elements that should belong together, such as body paragraphs, are not genuinely related. Using more similar typefaces may reduce the effect, but readers still notice the inconsistency, even subconsciously. They may not be able to describe its source, but its influence remains.
The phrase “or page” in this rule allows creative freedom. Jason Santa Maria’s website demonstrates the principle well: individual blog posts use a wide variety of creative designs and styles, while the site as a whole remains perfectly coherent.
2. Place Headings Prominently at the Top of the Page
For some reason, web designers once seemed afraid of large type. Body text was commonly set at 10 pixels or even smaller, while headings were only slightly larger. A heading is among the first elements users see on a new page and is essential for dividing content into sections. It should therefore have sufficient size and style to attract readers and provide a clear but unobtrusive structure for lower-level headings.
3. Use a Body-Text Size of 14px or More
This related rule may be the most important: body text should be large enough to read comfortably on a screen. Many other factors affect legibility and readability, especially in tightly spaced paragraphs, but type size remains fundamental.
Few of us have perfect 20/20 vision. A good default is 14 pixels.
4. Ensure Strong Contrast Between Text and Background
Increasing type size can improve clarity, but poor contrast between the text and its background still reduces legibility and readability.
The accepted standard is dark text on a light background, or the reverse. Avoid clashing colors and nearly invisible gray text on white.
Light text on a dark background does not produce the same perceptual contrast as dark text on a light background, even when it initially seems to. Letter spacing, size, and line height may therefore need to be increased.
5. Apply Emphasis and Stress with Restraint
This is both an editorial and typographic principle: do not overuse underlining, bold, or italics. Apply emphasis carefully to create additional, intentional stress.
Avoid very long underlined links as well, especially in serif typefaces and at small sizes. The default underline text-decoration: underline; cuts through letters with descenders—particularly g, j, p, q, and y—making them harder to recognize. A simple alternative is to remove the text decoration and apply border-bottom: 1px; to the `<a>` element, or display the underline only on hover using the `<a>` selector.a:hover
6. Do Not Set Continuous Text in All Caps
Ascenders and descenders exist for a reason: they help us recognize word shapes. Mixed-case words are easier to identify than all-capital words because they provide more varied and familiar height and baseline patterns. Compare the following:
“Results from legibility research may conflict, but one point is clear: text set entirely in capitals is more difficult to read than mixed-case text. This may not matter greatly for a single word, but it is critical in large blocks of text. The two also differ substantially in the amount of space they occupy.”
and:
“RESULTS FROM LEGIBILITY RESEARCH MAY CONFLICT, BUT ONE POINT IS CLEAR: TEXT SET ENTIRELY IN CAPITALS IS MORE DIFFICULT TO READ THAN MIXED-CASE TEXT. THIS MAY NOT MATTER GREATLY FOR A SINGLE WORD, BUT IT IS CRITICAL IN LARGE BLOCKS OF TEXT. THE TWO ALSO DIFFER SUBSTANTIALLY IN THE AMOUNT OF SPACE THEY OCCUPY.”
— Hochuli, J. 2008, Detail in Typography, 3rd ed., Hyphen Press, London, p. 24.
If you need to present a longer string in capitals beside regular body text, consider using small caps with font-variant: small-caps; and increase the tracking.
7. Give Text Enough Space: Use Sufficient Leading and Spacing
Following directly from the previous rule—no pun intended—give text the space it needs. Provide adequate room vertically and horizontally so its contrast and shape remain clear.
Check line length. Lines should not be so short that the eye must jump rapidly to the next one, or so long that readers lose their place when returning from the end. Line spacing is closely related: it should be generous enough for clarity, but not so large that the text becomes visually fragmented.
8. Be Careful with Fonts Not Designed for Screens
Expanding the range of web fonts is worthwhile, but choose high-quality typefaces appropriate for the medium. Thousands of fonts exist, yet only a small proportion work well for body copy, and fewer still have been optimized or designed specifically for the web.
Look for well-tuned fonts and test them at small sizes—10px, 12px, and 14px—across different browsers and operating systems to evaluate how they render under different engines.
9. Ensure Web-Font Resources Are Subsetted and Cached
Using @font-face increases page weight because the user agent, usually the browser, must download the font before rendering the text. One way to reduce the load is to use subsetted fonts that remove glyphs for characters the site will never need—for example, an English-language website may not require Cyrillic, and vice versa. Another approach is to instruct the browser to cache font resources for an appropriate period so they do not need to be downloaded on every visit.
10. Do Not Use Comic Sans
This is more personal frustration than universal law. Seriously, with so many alternatives available—including freely licensed fonts such as Comic Jens—why choose an overused and rather unattractive comic typeface?
That is my checklist. What is on yours?
Frequently Asked Questions About Web Typography
Why is typography important in web design?
Typography plays a critical role in web design because it has a substantial effect on the user experience. It communicates information clearly and efficiently. Strong typography improves readability, usability, and overall visual quality. It also guides users through a page and helps them interact with the site more effectively.
How should I choose the right font for my website?
The right font depends on the nature of the content, the target audience, and the site’s overall design. Choose a typeface that aligns with the brand’s personality and the message you want to communicate. It must also remain clear and legible across different screen sizes.
What is the ideal font size for web content?
The commonly recommended size for body text is 16 pixels. The ideal value can vary according to the typeface and device, however, so confirm that the text is comfortable to read on every screen.
How many different fonts should I use on a website?
A website should generally use no more than two or three typefaces. Too many make the design feel disorganized and confusing. Use different weights and styles within the same family when additional visual variety is needed.
Why is line spacing important in web typography?
Line spacing, also called leading, is essential to readability. Appropriate spacing makes text clearer, more comfortable for the eyes, and easier to follow from one line to the next.
How can I ensure good contrast in web typography?
Use text colors that contrast clearly with the background. The difference should be substantial enough to ensure comfortable reading.
What role does whitespace play in web typography?
Whitespace, or negative space, is the empty area around text and graphics. It separates elements and makes content easier to understand. Thoughtful use of whitespace improves readability and the overall user experience.
What are common mistakes in web typography?
Common mistakes include using too many typefaces, selecting fonts that are difficult to read, applying inappropriate line spacing, and providing insufficient contrast between text and background.
How does typography affect website loading speed?
Custom fonts can affect loading performance because every typeface requires additional resources. Use them carefully and balance typographic variety with website speed.
How can I test the readability of my web typography?
You can evaluate readability with tools such as Readable or through user testing. Both approaches provide valuable feedback about clarity and reading comfort.
