Great Web Typography

You can create an amazing web design without even using a single image. It is possible to create something remarkable, just with typography and the use of white space. Typography is not only about the choice of font, but also about improving readability, alignment and communicating effectively. Here are 5 tips for great web typography to send your message effectively.

1. Limit yourself to Less than Three Fonts

Keep the number of fonts on your website limited to three fonts at the maximum. It is recommended to use only two. Use one for the headlines and one for the content. You may use one more font if you like, but only if you really need it. Anything more than three fonts, and your website will look cluttered and  scattered. There will be a general lack of uniformity. It will be best to use just 2 fonts in different styles, sizes and weights around the entire site.

The secondary font should always be something that accentuates the primary typeface. But make sure that they don’t create a visual disparity. Give more emphasis is given to the primary font.

2. Smart Use of Character Sets

When you use web fonts, it is important to understand they will be downloaded from the server every time someone opens your site on their browser. If you are going to use only a particular set of characters, it will be best to optimize for that. A standard font will have thousands of characters that support several languages. You can reduce the load by ensuring that only the characters you are likely to use are included on your site.

You can choose the standard Latin character set instead of the entire font. You could also set the individual characters or the subset of the fonts you want included for the language support. This point will become even more important if you are hosting a website that supports multiple languages.

3. Use of Sufficient Contrast

Once you have determined the fonts you will be using on your site, the next most important point is to maintain sufficient contrast between the background and those fonts. It is recommended to keep a high contrast between them. Colors like white and black, yellow and black work well. Avoid colors that compete with each other like green and red, and red and blue. You want your visitors to spend more time on your web pages and not to cause eye strain.

4. Scale Type Responsively

Let’s say you’ve decided to go big for your headline fonts. If you have your header text set to 48pt on desktop devices, this isn’t going to be pleasant on an iphone. Imagine reading one or two words at the most per line. That’s not going to be a fun experience for your mobile users. Take advantage of media queries and scale down super large text for mobile users. It can still be big and bold, but make it big and bold and still readable.

Test your type on different mobile devices and optimize the size accordingly with media queries.

5. Give Text Some Space

Lines of text shouldn’t be crammed together. Have you ever read a line of text and then re-read it again unintentionally? When lines of text are too close, it can cause your eye to lose track of where the next line is, causing trouble for your readers. On the web, this is called line-height, and your text should be set to at least 1.5 as the value.


If you follow these helpful tips, your web type should be pleasant for all viewers. The easier your site is to read, the more that visitors will be to come back and read more articles from you. Do you have any useful tips for good web typography?