Checklist for Typography and Fonts in Web Design

Share and Comment

It is no secret that any site is primarily text information. For this information and comes the target audience of the resource. To make the texts comfortable to read, and the information is best perceived by visitors to the site should work carefully with typography.

Typography – is the skills of design of printed texts, for their best perception. The printing process consists of the selection of headsets, selection of font pin, determining the length of the line, line and letter spacing, as well as the mutual location of texts, photos and illustrations on the web page. That is, the selection of all the parameters that can improve the readability of the text.

How to understand whether the work on the texts on the site is well done?  In fact, it is simple, it should be comfortable to read and perceive the information, eyes should not strain, the structure of the text on the page should be clear. In most cases, when there are some problems with the texts, we involuntarily go to another resource, even if the information on the site is relevant, would be useful and interesting to us. In addition, it is useful to check fonts with the help of mockups. This iphone mockup is a good sample. All this is about discomfort.

Let’s look at some principles and features of typography in web design, which affect the perception of information.


Let us consider a number of recommendations on the number of fonts, selection, size. For the layout to be neat, serious and easy to read, it is not necessary to fill it with all the fonts that can be stuck in the layout.

In the past, mainly used the so-called safe fonts, but with the development of css it became possible to connect any font to the site using the rule @font-face.

Match good pairs

Take the fonts very seriously (choose 2 fonts that will harmonize with each other). One for the title and the other for the main text. The title should contrast with the main text, but should not be huge or too small. To create a harmonious font pair, use fonts (Antique in combination with Grotto), select the font size, use italic, bold, regular, and use color.

Limit the number of fonts

Use no more than 3 fonts on the site (1 for titles, 2 for quotations and 3 for main text).

Do not use decorative fonts

Your arsenal has decorative fonts, and your hands itch to use them in the layout? Forget about it, unless it’s absolutely necessary. They can be used, as a last resort, for a thematic site and then for headlines. Do not use handwritten or decorative fonts for content, they have very poor readability.

Do not decorate fonts.

Don’t get carried away with decorating texts in Photoshop. I mean, there’s no need to use gradients, shadows everywhere in texts, various layer effects in Photoshop. They will only interfere with reading and make the look of the site cheaper.

Do not abuse the capital

Do not capitalize texts. Text typed in capital letters, first of all, we do not read well, secondly, it seems as if you are shouting at the user. You can write the title in capital letters and then if it takes no more than one line.

Share and Comment