Most people have never had to think about typography when browsing the internet. This is because most websites have their typography dialled in. We have 9 best practices that you can use to make sure your site’s typography meets user expectations and keeps them reading (or at the very least, skimming) what you have to say.
1. Limit the number typefaces allowed on a website.
You should not use more than two fonts on your website to maintain visual cohesion. Many websites work well with just one font, even if they use different fonts within the same typeface for different purposes (e.g. headings, body or button text).
2. For body text, use a sans serif font
Although serif fonts can be used in printed text, most typography experts agree that sans-serif fonts are more easily readable in digital contexts. Web text is easier to read without decorations.
However, serif fonts can be used on websites. A serif text in a title or heading or decorative section can draw attention to the content and add contrast. For text blocks that are more difficult to understand and read, you can use “sans” text.
3. Use standard fonts first.
By “standard”, we don’t mean “plain” nor “boring” but “compatible.” You can make your text easily readable by choosing a font that is web-safe.
Standard fonts have a few benefits. All web-safe fonts are compatible with every browser and device. The system will default to another font if a font is not recognized.
Second, most readers are used to standard fonts online. The text will not distract them and they will scan it faster. Your typography should be helpful to the reader and not distract them away from the content.
Third, web-safe fonts are less likely to have inconvenient design flaws than other fonts. For example, a standard font won’t have any unusual kernings that can make two letters appear stuck together. These fonts also reduce the likelihood of two characters being difficult to differentiate, such as “I” from “L” and “r” between “n”.
You can choose a non-standard font or typeface, but some browsers may not recognize it and display plain Times New Roman. While there’s nothing wrong in good old Times fonts, they are better for text body.
You can solve this problem by implementing a Font stack. This is a list of backup fonts that the browser will render in case your first font choice does not work. To ensure that visitors see the best style of text, you can include a few standard fonts in your font-stack.
4. Your text should be sized appropriately.
Web designers use pixels (px), rather than points (pt) to specify font size. This is because a web designer specifies font size with pixels (px) rather than points (pt). Two people might view 12pt text on the exact same website, but their devices and web browsers may cause them to see different things.
It is a common practice to limit all web text to a minimum size 16px. This is approximately the size of the body text in printed media and the smallest font most people can read without having to zoom in. You can increase or decrease the font size to aid readers and establish hierarchy. However, don’t use large fonts.
Headings should be bigger than the body text. H2, H3, and H1 should reduce their size. This allows readers to scan your pages for the intended content. For a more contrast with the body text, you might consider adding different weights to your headings.
5. Use only one cap
This is a more straightforward rule. “All caps” is not necessary in almost all contexts, except for branding and decorative text.
Bold text to emphasize heading or body text. This gives the same effect, but is more readable and visually appealing.
6. Be careful with colors.
Bad pairings of background and text colors are a common problem for web users. They don’t contrast well enough to make it easy to read. Avoid putting text on top of images or layering it over backgrounds with similar colors.
The Web Content Accessibility Guidelines (WCAG), recommends a contrast ratio at least 4.5 to 1 for most text and 3 to 1 for large bolded text. To check the contrast between your fonts and background colors, use this tool. You can also use black text with a white background to improve legibility.
Be mindful of the color of your text, aside from contrast. Your body text should be one color, with the exception of hyperlinks which should contrast with other parts of the text. Blue as your default color should not be used, as it can indicate a hyperlink.
Red and green should not be used as visual cues in your text. This will make it difficult for people with red-green blindness to see. It is not a good idea to use color alone to differentiate one section of text from another. To emphasize a text snippet, combine color with other styling such as bolding, underline, or italics.
7. Limit your lines to between 40 and 80 characters
We humans are very picky readers. We prefer lines of text between 40-80 characters. Any less will cause our eyes to wander to the next line more often, which can distract us. Any line longer than this will cause readers to become bored, create discomfort, and make it more difficult to locate the beginning of a new line. As the eye moves back to the left side, the line becomes longer.
These parameters allow for a variety of page layouts and mobile-responsive designs. If you are able, try to keep your lines between 60-70 characters. You will be a blessing to your eyes.
8. Provide sufficient spacing between lines.
Proper whitespace makes it easy for readers to follow single lines of text, and then return to the next line after a break. Accessibility frameworks often allocate vertical space according to the font size of the text.
Begin with a spacing of 1.5 for body text. This means that the leading should be 50% higher than the text line. This distance should be slightly longer for headings. Start with 2.5 spacing between paragraphs and increase or decrease from there.
9. Eliminate animated text.
Animations can grab attention but flashing or moving text is worse than animations. You’ll be able to read any note someone holds up to you if you have. It takes effort to stabilize the message in our brains.
Worse, many visitors will view this text as an inconvenience, a gimmick and/or an advertisement. Flashing images can also cause photosensitive seizures.
This rule applies only to exit or entrance effects. They can create a unique experience for visitors as they scroll. However, the text should not change once it appears.
Test Your Text
These guidelines and your typography knowledge will allow you to experiment with fonts and styles in order to create the perfect reading experience.
There’s one final catch. You can follow all the guidelines and not pay attention to a certain aspect of typography that a visitor to your site will notice immediately. User testing is the last phase of any text design iteration.
You should find a variety of internet users that can give you feedback on the readability of your text content. You don’t have to publish product descriptions or romance novels. By incorporating human feedback into your typography you can ensure that your website is easy to read and enjoyable.
Remember, you can always consult the experts for professional help with your web design goals.
