- Key Takeaways
- 1. Apply no more than three typefaces per design (or page)
- 2. Set headlines large and invitingly, at the top of the page
- 3. Size body copy 14px+
- 4. Ensure a good text to background contrast
- 5. Apply stress and emphasis discreetly
- 6. Do not set continuous text in full capitals
- 7. Give the type space to breathe; set ample measures and leading
- 8. Be wary of fonts not designed for screen use
- 9. Ensure webfont assets are subsetted and cached
- 10. Don’t use Comic Sans
- Frequently Asked Questions about Web Typography
Key Takeaways
- Stick to using no more than three typefaces per design or page to maintain unity and avoid creating a sense of disunity or oddity for readers.
- Set headlines large and invitingly at the top of the page and ensure body copy is sized at 14px+ for optimal legibility and readability.
- Maintain good contrast between text and background, and avoid setting continuous text in full capitals as it hampers readability.
- Be cautious about using fonts not designed for screen use, and ensure webfont assets are subsetted and cached to reduce page load size. Comic Sans is discouraged due to its overuse and unattractiveness.
1. Apply no more than three typefaces per design (or page)
Setting no more than three typefaces (or digitally, fonts) per design is a great basic rule. Applying and setting text with a larger variety of typefaces (even if they are similar) creates a sense of disunity; readers are given the notion that related if not the same types of text (e.g. body paragraphs) are unrelated. Using a larger variety of similar typefaces might side-step this disunity but the reader will still note—even if subconsciously—an oddity. Even if they are unable to describe and source the disturbance the effect can remain. The reason “or page” is in this rule is to provide artistic freedom. Jason Santa Maria’s web site illustrates this fittingly with his creatively diverse designs and styles that his blog posts express, while his site at large retains perfect unity.2. Set headlines large and invitingly, at the top of the page
There used to be this amazing fright of setting large text on the web. Body copy set at 10px (and even lower!) seemed rampant, and headings were rarely treated to anything beyond a slightly larger font size. Headings are some of the very first strings of text read by the eye when navigating to a new page, and vital to mark sections in passages. As such, grace headings with the size and styling they deserve to invite the reader and provide ample, but unobtrusive sign-postings for lower tier headings to guide the reader.3. Size body copy 14px+
This is a related and perhaps the most important rule of thumb: give body copy the size it needs to be comfortably read on a screen. Of course a large range of other factors influence and legibility and readability of text and particularly more closely set body copy, but size remains critical. Remember that not many of us have 20–20 vision; a good default is 14 pixels.4. Ensure a good text to background contrast
Upping the font size is a sure way of making your text more legible, but legibility (and as a result, readability) will be diminished by poor contrast between the text and the background on which it rests. The well-established standard is to place dark text on a light background, or vice versa. Absolutely avoid clashing colors or a barely visible grey on a white background. Special care needs to be applied to light text on a dark background because it doesn’t have the same contrast (even though it first may appear so) as it’s cousin opposite: increase the tracking, measures, and leading accordingly.5. Apply stress and emphasis discreetly
This is partly and editorial principle, partly a typographic one: don’t litter text with superfluous underlines, bolding, and italics; apply emphasis and stresses sparingly exactly for added and intentional emphasis. On a side note, avoid overly long hyperlinks with underlines, particularly on serifed typefaces and even more so at smaller sizes. The defaulttext-decoration: underline;
will cut through glyphs with descenders (chiefly g, j, p, q, and y) and make them more difficult to discern. A handy solution is to set no text-decoration and instead use a border-bottom: 1px;
or only on mouse hover (a:hover
).
6. Do not set continuous text in full capitals
Ascenders and descenders exist for good reason: they allow us to easily identify words. A word that is set in upper- and lowercase is more recognizable than same word set entirely in uppercase due to the uniformity of the height and baseline of the word. For example, contrast:with:‘THE RESULTS OF LEGIBILITY ANALYSES CAN BE CONTRADICTORY, BUT ONE THING IS CLEAR: TEXT SET IN CAPITALS IS HARDER TO READ THAN TEXT SET IN UPPER- AND LOWERCASE. THIS MAY NOT BE PARTICULARLY IMPORTANT IN THE CASE OF INDIVIDUAL WORDS, BUT IT IS FOR LARGE AMOUNTS OF TEXT. THEN TOO, THERE IS ALSO A GREAT DIFFERENCE IN THE AMOUNTS OF SPACE.’
— Hochuli, J. 2008, Detail in Typography, 3rd edition, Hyphen Press, London, p. 24. If you find yourself needing to set longer strings of text wholly in uppercase alongside regular body copy, consider setting them with a more ample leading in small capitals (‘The results of legibility analyses can be contradictory, but one thing is clear: text set in capitals is harder to read than text set in upper- and lowercase. This may not be particularly important in the case of individual words, but it is for large amounts of text. Then too, there is also a great difference in the amounts of space.’
font-variant: small-caps;
).
7. Give the type space to breathe; set ample measures and leading
Leading straight on (no pun intended) from the close of the last rule, ensure your text has enough room to breathe; give it the space it needs, both vertically and horizontally to ensure a good, crisp contrast for legibility and readability. Check that lines are not too short requiring jerky, quick dashes of the eye to trace to each following line, but also not too long to get lost when reaching the end of a line and then proceeding to the next. Going hand-in-hand with the line length is leading: provide enough space between lines, but not too much to rip the text apart.8. Be wary of fonts not designed for screen use
Extending beyond the core web-safe fonts is an endevour deserving merit, but only select quality typefaces that match the medium you are working with. There is a fantastic abundance of fonts in the world, of which only a subset is good for setting body copy, and an even smaller subset of which has been optimized, or designed specifically for web use. Look out for good hinting tables and test your font at smaller sizes (10px, 12px, 14px) on a variety of browsers and operating systems to gauge how well the various font rendering engines display the font.9. Ensure webfont assets are subsetted and cached
When using@font-face
webfont assets the page size will increase—the user agent (chiefly the browser) will need to download the font for text to be rendered with it. One way to reduce this load size is to subset the font: remove unneeded glyphs for characters you won’t ever be using (e.g. an English web site has little to need for Cyrillic glyphs and visa versa). The second is suggest to user agents to cache the asset for a certain period of time such that subsequent visits don’t result in re-downloading the font.
10. Don’t use Comic Sans
More of a personal note and frustration. But seriously, why would you use this overused and quite unattractive comic typeface when there are so many others to choose from, including freely licensed ones like Comic Jens. That’s my list. What’s yours?Frequently Asked Questions about Web Typography
What is the importance of typography in web design?
Typography plays a crucial role in web design as it significantly impacts the user experience. It helps in conveying the message clearly and effectively. Good typography enhances readability, usability, and the overall graphic aesthetic. It can guide the users through a web page and enable them to interact with the website more efficiently.
How can I choose the right font for my website?
Choosing the right font for your website depends on several factors such as the nature of your content, target audience, and the overall design of your website. It’s important to choose a font that aligns with the personality of your brand and the message you want to convey. Also, ensure that the font is legible and looks good on different screen sizes.
What is the ideal font size for web content?
The ideal font size for web content is typically 16px for body text. However, this can vary depending on the font type and the device used to view the content. It’s important to ensure that the text is easily readable on all devices.
How many different fonts should I use on my website?
It’s generally recommended to use no more than two or three different fonts on a website. Using too many fonts can make the design look cluttered and confusing. It’s better to use different weights and styles of the same font family for variety.
What is the significance of line spacing in web typography?
Line spacing, also known as leading, plays a crucial role in enhancing readability. Proper line spacing makes the text more legible and easy on the eyes. It also helps in guiding the reader’s eye from one line to the next.
How can I ensure good contrast in web typography?
Good contrast in web typography can be achieved by using colors that stand out against the background. The text color should be significantly different from the background color to ensure legibility.
What is the role of white space in web typography?
White space, also known as negative space, is the empty space around the text and graphics. It helps in separating different elements on the page and makes the content more digestible. Proper use of white space can enhance readability and improve the overall user experience.
What are some common mistakes to avoid in web typography?
Some common mistakes to avoid in web typography include using too many different fonts, using hard-to-read fonts, not using proper line spacing, and not ensuring good contrast between the text and the background.
How can typography impact the loading speed of my website?
The use of custom fonts can impact the loading speed of your website. Each custom font is an additional resource that needs to be loaded, which can slow down your website. It’s important to balance the use of custom fonts with the performance of your website.
How can I test the readability of my web typography?
You can test the readability of your web typography by using tools like Readable or by conducting user testing. These methods can provide valuable feedback on the legibility and readability of your text.
Pascal is a standardista graphic, web and front-end designer, and a rampant typophile. Born in Mainz, Germany—the birthplace of Gutenberg—he now works in Canberra as a contract designer and studies at the Australian National University. He's been actively engaged in the Open Source community and local web industry, notably as one of the unorganisers to first bring BarCamp to Canberra. He enjoys drinking in as much good type as he can get and has been happily bending beziers since 2004.