Typography on the Web

Typography on the Web – this is an area in which you should take care

Good typography is based on many factors irrespective of output medium. In this way you can, for example, transfer experiences with tracking and x-height from print to web design, without encountering problems and control both with CSS (Cascading Style Sheets). Nevertheless, in other areas the web throws up a few anomalies, which you ought to watch out for.

Good readability on all browsers

Line length is very important for good readability, but there is no simple way of checking it. Irrespective of whether the browser is running on a Smartphone or a 27" screen, various surfaces and formats are available. Modern, elaborate designs react on this problem with a layout, which is dependent on the browser width and change from a single column to a double or triple column format. It is less elaborate, but also less flexible to work with a fixed page width, which is no longer dependent on the browser window. Be sure to check how your web layout reacts to a change in size of the browser, in order to avoid long lines, which are impossible to read.

Text size on the Web

Controlling text size on the Web is even more difficult. In the final analysis you can specify only in what proportions the texts will stand with respect to each other, since the user is able to modify the perceived size of fonts in his or her browser. There is no one way of deactivating this function, to suit all browsers. Therefore, you must take care that your layout will tolerate modifications in the size of the text within certain limits.

The choice of the right fonts

One of the most important areas of typography, the choice of the right font was for a long time on the Web limited to just a few fonts. With the advent of Web fonts, which in the meantime can be licensed directly from Linotype, the situation has fundamentally improved. However, the low resolution of the majority of screens puts high demands on the fonts. Very thin lines, little embellishments and playful details can often be lost. Therefore, take care to set fonts rich in detail in adequate sizes. Only in this way can a typographical treasure reveal its full effect and not become an ordeal for the viewer trying to read it.
Also, do not forget that fonts are optimised to various degrees of suitability for display on a screen. For this reason, moderately optimised fonts even in small font sizes often look rather blotchy on the screen. Therefore, for longer texts use fonts, which have good hinting. The e-text fonts from Monotype are optimised at a great deal of effort and expense for display on a screen and offer extremely good hinting. If you use these fonts as Web fonts, you are erring on the safe side in terms of text.

The right combination of headline and text fonts

So long as you keep the display quality on the screen in mind, Web fonts open up whole new typographic possibilities. For example, you can combine Glypha Bold for captions with Frutiger Regular in the text area, to produce a down-to-earth, solid character. A more classic and also somewhat more sophisticated flavour can be achieved with the combination of Futura Bold in the captions and Baskerville Regular in the text. And if it needs to be modern, choose the Neo Sans Medium for the headline and ITC Officina Sans Book for the text.

Use of figures in tables

You can also use figures in the area of micro typography with Web fonts. Take care, for example, in work with lots of figures, such as tables, to use fonts, whose figures are just as easy to read in small sizes. The Vialog, for example, and the Neue Frutiger 1450 lend themselves to this. And not least, you can use justified figures for the tables font, in order to lay out the figures perfectly aligned one below the other – as a rule all Linotype and Monotype Library fonts are provided with figures for tables and with proportional figures.