Perfect typography

Web typography tips

Choosing font(s)

By fonts I mean font-face and in good web coding that means font-family. Usually you should use web safe fonts, however if you feel that you need to extend your palette you can use one of the font replacement techniques. In the end I would recommend that you use no more than 2 fonts.

Align and width

Most websites are full of articles or other longer pieces of text and occasionally you get to see center alignment for this text. Please don't do that, unless your text is a song. The same goes for line length. I urge you to make sure you give text boxes proper widths. If the width is too short the eyes will tire from jumping from line to line and if they are too long the eyes will tire as well.

Vertical attributes

To improve readability of text you should use a bigger line-height than the default one. Design books suggest 1.5 times the font size or in CSS 1.5 em. Unfortunately this is just a rough assessment and to achieve a truly good result you will need a lot of experience. Luckily you can use my line-height calculator to get a better approximation of the best line-height.

Once you are done you should tend to the vertical rhythm. As luck would have it there is also a baseline rhythm calculator that you can use to achieve vertical harmony.

More information can be found here:

Compose to a Vertical Rhythm
Typography: Baseline Rhythm Deciphered

Text roles

To make your site more scannable and therefor usable you should make sure that text roles are clear. First make sure you give headings at least 1.5 times the font size of normal text. Next are the links, you should either underline them or make them a different color.


You can use different techniques to suggest to the reader the more important parts of text. In these cases you should preferably use bold or italic but never together.

Not done

These were just a few basic tips for improving your web typography. If you are really serious about it you should read at least a couple more typography articles or better yet a book or two on the subject.

© Armin Cobo, Perfect Typography