Web Design

10 Typography Tips for Web Design

10 Typography Tips for Web Design

Typography is a crucial element of good web design. The styles of font you use can make the difference between an enjoyable read and a headache. Graphics and other visual features will help to get your message across, but approximately 95% of your message will likely be contained in the text on a web page.

The written word is, of course, a form of communication. A poor choice of font can make it hard for people to understand what you are trying to say. Here are ten typography tips to ensure that the message on your website comes through loud and clear.

1. Limit the Number of Fonts

Too many fonts can be distracting to the reader and look unprofessional. One font will usually suffice, two is OK, but you might be pushing it at three. It is also worth bearing in mind that some fonts work together better than others. So, choose fonts that complement one another rather than clash with each other, and remember to use the same fonts consistently throughout a website.

2. Get the Font Size Right

The display font will depend on the type of device being used to view the content. So, it is advisable to test the readability of text on a full-size desktop computer screen and a mobile device. Text for digital media is better displayed in a larger font than you might use for printed content. A good font size for the body of content is 16 or 18 pixels. Headings look good at around 48 pixels. The crucial thing to remember is that people sit back from digital devices when they read the content, and not everyone has perfect eyesight. So, avoid using font sizes that are too small or difficult to read.

3. Use Standard Fonts

There are some amazing-looking fonts available. However, it is generally best to stick with the standard system fonts with which everyone is familiar. Zany, unusual fonts will distract the reader, and some people may even get distracted from your site researching what font you used! Typography is all about communication. So, yes, in many respects, boring is best when it comes to choosing fonts for a website. Let your creative side loose on your graphics rather than on your choice of typeface.

4. Avoid Overemphasizing

Bold and italicized text are excellent ways to emphasize a word or a phrase. However, if you overuse these highlighting methods, you will lose the impact of the emphasis. Generally, it is also best to avoid using words written all in capital letters. Capital letters infer that you are shouting at the reader, and no one likes to be spoken to that way. It may surprise you to learn that words in caps also take longer to read, so you will reduce your content’s readability if you overuse the all-caps words.

5. Choose Fonts with Distinguishable Letters

Be careful not to use fonts that might make it difficult to distinguish letters. In some typefaces, the “I” and “L” look almost identical. So, test fonts in a variety of contexts before you select one for your website, and look at how the letters look in both upper and lower case. People get impatient quickly when reading online content, so anything that might be confusing to a reader is bad news on a website.

6. Ensure Contrast Between Text and Background

Using shades of the same color for text and the background will make the constant difficult to read. You don’t necessarily have to use black text on a white background. However, black on white is the most common combination, and the one of the easiest to read. If you use colored text, it is recommended that there is a contrast of at least 3:1 against the background. It is also best to avoid using red or green text because red and green color blindness is the most common type of color blindness.

7. Line Height and Line Length

Try to avoid cramming too much text into a small space. The optimum space between lines, known as line height, is 120% of the text height. Any less than that, and readers may lose their place when scanning from one line to the next. It is best to avoid having extremely long lines of text, too. The optimum line length for readability is 45-90 characters, including spaces. It will also help if you leave plenty of space between paragraphs, making the text easier to skim-read.

8. Make Good Use of White Space

Websites with too much text look too busy and are tricky to read. So, it is best to break up blocks of text with borders of white space. You will also need more subheadings in digital media than you would printed text. Subheadings are another way to break up content and make the text easier to skim-read. People don’t sit back to enjoy a good read with a website, as they might with a book. Website visitors want to find information fast. So, using fewer words when possible is usually the best approach to take.

9. Use a Left to Right Layout

People in the Western world expect to read text left to right. If you diverge from that convention in any way, readers may not follow your writing flow. Subheadings, for example, are best left-justified because the left is where people’s eyes will naturally fall after the end of a paragraph. Center-justified major headings and bullet points can work well, but the body of the text is always best left-justified. Multi-column layouts, like a newspaper, are also not usually a good idea for a website because they can look too busy. Multi-column content would also become cramped and difficult to read on a mobile device.

10. Consider Font Personality

Finally, it would also be a good idea to think about the personality of the font you choose. Some fonts, like Times New Roman, are considered classic, traditional, and trustworthy. Other fonts, like Arial, are clean and modern. If you opt for a handwritten style font, you will give the impression of something more informal or artistic. So, consider what a font says about your brand before using it on your website.


Your choice of typography can either make your website easy to read and understandable, or virtually illegible. Even if a font looks great on one website, it doesn’t mean that font is right for your brand. So, take your time choosing fonts and bear in mind the above tips, because changing typography on a website can be very time-consuming.


Leave a Comment

Web Design Blog