Web typography

Web Fonts – Em square

by George Paterson.

To properly understand how to typeset web fonts it is necessary to understand how the font fits with the other structures on the page.

The em square is a fundamental property of a web font, the square is a container for a two-dimensional coordinate system. Each unit of this grid is called a font unit, the greater the number of font units per em square the greater the resolution of the font.[1]

Web Fonts

by George Paterson.

With the @font-face CSS declaration now supported cross browser it is possible to attach fonts to web documents. Implementation though is a maturing subject supporting a number of different formats. Some background and techniques are described in this article.

Font formats


TrueType is a spline-based font standard originally developed by Apple.[1]

Supported by the latest versions of Firefox, Opera, Safari and Chrome.


OpenType was developed by Microsoft with Adobe contributing and was intended to supersede TrueType.[2]

Supported by the latest versions of Firefox, Opera, Safari and Chrome.

Embedded OpenType

Designed by Microsoft to be embedded into a web document, the file is an encrypted OpenType or TrueType font that has a list of allowed host domains compiled into it, the font can also be subsetted when the EOT is generated. Since EOT is a propriety format it was rejected by the W3C.[3]

EOT’s are generated by Microsoft’s Web Embedding Font Tool.

Supported by Internet Explorer 4+.