Applying good typography to the Web (part 1)

Typography is one of the main characteristics of Web design. During the previous months I touched this issue but I think it is sometimes better to return to the basics.

This post hopefully is going to be the first one of a series about how typography can make a website look and act better. Of course it is not a complete guide to typography rather than some guidelines.

The basics

Each font carries some characteristics which make it special. If one knows them, it is easier to control it and use it effectively.

The height of a font is the x-height. However there are letters such as “h” or “g” which override the x-height. The part of a letter which ascends above x-height is called ascender and the part which descends below it is called descender. Ascenders and descenders define the ascender line and the descender line respectively.

Kerning και Letter-spacing

Kerning is the horizontal space between individual characters in a line of text.

Letter-spacing is the average distance between letters in a block of text. In Web design, kerning and letter-spacing is the same thing, but in print design apparently they are different.

Leading (or line-height)

Leading is the amount of space added between lines of text to make the document legible. The term springs from the lead spacers used by printers between lines of text in order to make it readable.

The term line-height is being used only in CSS and it is an equivalent of leading. If someone knows why we use this term instead of leading, please let me know.

em and points

While pixel is known to everyone, em carries its own story. It is defined as the width of capital “M”. It is also defined as the point size each time. For example, in 14-point type, em is a distance of 14 points.

A point is a way to measure distances in typography. It is almost equal to the 1/72 of an inch.

When designing for the Web it is better to use ems instead of pixels. One reason for this is that when changing the text size in a browser (by pressing Ctrl+ or Ctrl-) old versions of Internet Explorer do not make the change when text size is given in pixels.

Another reason has to do with elastic layouts. The whole width of an elastic layout changes according to the text size when it is given in ems.

Serif and Sans-serif fonts

It is one of the easiest ways to discern fonts. Serif fonts are generally rich and include decorative strokes (called serifs) added to the end of main strokes. Sans-serif fonts are simpler.

Of course there are fonts which are neither serifs nor sans-serifs. They are something in-between. Sometimes we call them semi-serifs. They exist to make our typo-life more interesting.

The wise combination of a serif and a sans-serif font at the same website can make the design extraordinary and beautiful.

Afterword

For the examples above I used Georgia (serif) and the old time classic Helvetica (sans-serif). I hope you liked this post as much as I did. The next episode of the series will include some ways to apply all the above in a specific design.