The possibilities for micro typography on the Web


The typographical possibilities recently opened up by web fonts are putting the topic of typography in the design of web sites back into the limelight. For you as a designer, however, the issue is also one of approaching the work with the same standards and the same love of detail as in fonts for paper. In the next sections we should like to present the different possibilities, offered for some time now by CSS, to control micro typography accurately even on the Web.

If you have assessed the type of font to be used via the CSS tag “font family”, you can control its appearance very accurately with numerous other CSS tags.
In principle you should use the relative “em” specification, rather than fixed units, such as pixels (px) for the size specifications. This relates to the font size of the element and ensures that your justifications are cleanly calculated, for the case where the user alters the font size.


Line weight and font style

You can use the CSS font weight and font style tags to determine line weights and the cursive font style. Although, in theory, ‘font weight’ allows specifications other than normal specifications and bold, these are very seldom supported by the fonts and browsers installed. It is better to return to the CSS ‘font family’ tag to select the suitable stroke weights from the fonts embedded via @font-face.
We would advise against using the CSS “font variant” tag, which lets you generate small capitals. These so-called false capitals are produced by capital letters which have been produced on different scales and therefore contain visible differences in line weights and do not belong in the repertoire of a good typographer.


Font size and x-height

It is, of course, obvious, but each font size (css: font-size) always has a matching x-height (css: line-height).
With a sufficiently large x-height, for example, you can ensure that texts with relatively long lines can be read without any problem. Or use these specifications to achieve a special design effect with the “small font”, “large x-height” combination.


Spacing between characters and words

The distance between letters is controlled by the CSS “letter spacing” tag. You can use this specification not only to produce a locked text with relatively large specifications, but also for fine adjustments. For example, light-coloured text on a dark background usually requires a slight enhancement of the tracking, which can be done with this specification. If you wish only to enhance the space between words, use the CSS “word spacing” tag.


Special effects

The CSS “text decoration” tag is used fairly frequently to produce an underscore. For instance, it is often used to control the appearance of links.
Less well-known is the CSS “text transform” tag, which allows you to make the text appear in upper or lower case letters irrespective of the actual contents.
Fun font effects can be produced with “text shadow”. On this, read the article „Creating great effects using web fonts“.


 normal  
 Line weight  font-weight:bold
 Font style  font-style:italic
 False capitals
 (nicht empfohlen)
 font-variant:small-caps
 Font size,
 x-height
 font-size:0.7em;
 line-height:3em;
 Letter spacing  letter-spacing:0.3em;
 Word spacing  word-spacing:0.3em;
 Underlining  text-decoration:underline;
 Transforming  text-transform:uppercase;

Example produced with: