We already know that the web design is 95% typography, would not it then be logical that we dedicate a little more effort to take care of the text of our models?

Many times I find web pages with excellent designs, harmonious and contrasted color schemes, with spectacular images that support the content but that fail to arrange the text boxes drastically impoverishing the general impression.

It seems that the designer had left the text work for the end: «… and here, in this space, the text goes». Maybe it’s because you usually receive the content at the end, when the client has already seen your page. The fact of not having a careful and quality material from the beginning can make it not given the importance it deserves.

We should not forget that the first objective of any site is to communicate our message, to read us. Content marketing, it sounds, right? That content has to be presented impeccably.

On the Internet, it is possible to read if the content is of quality and is well presented. I’m tired of hearing that the internet does not read. I do not think that’s true. If you do not read more, it may be because we have not worried enough about the way we present the texts. Of course I’m not going to read your 600-word text with a body of 11 pixels and an interline that makes me cry. That way he could not read Cortázar.

These are some suggestions that it is worth taking into account:

ncrease text size

If your website is composed of a body of less than 16 pixels, you are losing money .

16 pixels is not a large size for the text, it is an ideal size. At a suitable distance from the monitor we perceive it in a similar way to the size we read in a book on the beach.

Gone are the sites in Flash with tiny pixel typefaces . A time was very fashionable but it was a horror in every way. Fortunately we have gone from a gimmicky but hollow website to one in which, at last, we start to value the well presented content.

Adjust line spacing

When I say adjust the line spacing I mean in 80% of the cases to expand the line spacing. It makes me very nervous to see blocks of text where there is barely room to breathe between the lines. Reading like that is torture. Let’s be generous and create beautiful typographic textures with proper line spacing. The CSS property for this is line-height. Each typography and block of text requires a measure but defining an interline of 140% of the body size can serve as orientation.

Watch the length of the lines

A common mistake is to have boxes of texts that are too wide with many words per line. This makes reading difficult, it makes it slow and heavy and fatigue appears right away. Our eye has to work excessively by forcing it to travel a great distance to start the next line.

That our page adapts to the width of the browser does not mean that our text has to go from side to side of the screen. An ideal length shows between 50 and 75 characters per line.


Book and magazine designers have been enjoying tracking for many years. Web designers have since the CSS version 2.1 of the property  letter-spacing that is a small and distant cousin of the tracking of the editing programs.

This greater control allows us, for example, to adjust the prose of capitals as in the column to the right of this post that have a slightly open spacing.

Update your web typography palette

We have already talked several times about the revolution that has led to the possibility of using web fonts in our designs. We are free to use almost any source. Update your palette, discover which types you work best with, which ones you feel most comfortable with, and incorporate them. Your designs will improve substantially.

signed up for Typekit . At first I contracted the personal plan but soon I went to the next one. For very little else I have access to a larger catalog of sources that I can use in all the sites that I see fit.

These are just some general tips. There are many wonderful books to learn typographic design. Thinking with types is one of the essentials.

I said at the beginning of the post that web design is 95% typography. Here is the original article by Information Architects in case you do not know it.