Website Typography

Typography can be tricky on the web because you need to distinguish between graphic text and HTML text. HTML text can be controlled in terms of size, color, leading, and font (to some extent). Unfortunately line breaks are just about impossible to control in HTML text. This is for two reasons, one is that most text areas will "stretch" with the browser as it is widened or narrowed by the user. The second reason is that it is possible to place text into a table that does not stretch, but the different ways type is handled between Macintosh and Windows (and even between versions) makes it impossible to specifically control the line breaks in a block of text.

Although you can specify any font in HTML text you should normally choose between Arial, Verdana, Helvetica, or Times because for the text to display in the chosen font it must be installed on the user's system. These four are all likely to be installed.

If you do want to control font and line breaks you will need to treat type graphically. This is often used for navigation graphics, headlines or sub heads. Keep in mind though that any text that is specified as a graphic will not be searchable by the search engines and cannot be edited through a content management system.

Tech note: precise control of graphic text. By duplicating the layers of type graphics and adjusting the layer opacity of the duplicated layer you can control the intensity of the type color.

When creating small graphic type, adjust the point size by 0.1 increments until it looks best. (Sometimes reducing the size will improve the clarity of the type due to the relative juxtaposition of the pixels.) Keep all type layers unrendered so that they can be used later to create additional graphics consistently.