My web typography is awful

Inpired by Robert Bringhurst's "Elements of Typographic Style" I decided to explore the typographic capabilities of CSS further. What I found was that browser support is much better than thought and that my own approach to Typography is woefully lacking.

• January 16, 2007
• Updated September 19, 2024

Everyone knows web typography is lacking ¶

I am not the first to notice that Typography on the web is generally terrible. Many designers overlook the importance of Typography and leave text at default settings, using the safe but not so inspiring Arial. Textual layout is often an afterthought. Reading Bringhurst’s book I realised there is an entire craft that is generally being overlooked. Devoting time to typography is an essential part of design and moreover legibility. Usability is rightly being seen as a key driver for successful websites, so whey isn’t typography being mentioned more often?

CSS does allow text to be styled extensively ¶

Reading the CSS 2.1 Spec I rediscovered some properties that had been pushed aside because there I thought (wrongly) that there were cross browser issues. There are some properties that are not well supported but there are many that have excellent support and are, in my opinion, being underused. With some sound knowledge of CSS and XHTML there is no reason why typographic layouts should be limited to default settings.

The following properties are cross browser friendly for example:

• text-indent
• text-align
• letter-spacing
• word-spacing
• text-transform
• first-letter
• line-height

Have a look at the example page to see these properties in action

Granted typography on the web is not an easy environment to operate in. There are a limited number of fonts available, browser support for some typography-related CSS is poor. But after reading the spec and testing a few properties I felt empowered rather than depressed.

Useful resources ¶

• The Elements of Typographic Style - Robert Bringhurst
• The Elements of Typographic Style Applied to the Web - Richard Rutter
• Five simple steps to better typography - Mark Boulton
• Dave Shea - Fine Typography For the Web
• Windows Font Survey Results
• Mac Font Survey Results

A resolution ¶

I’m resolved to improve my typography after reading Bringhurst’s book and the work of a couple of pioneers in Richard Rutter and Mark Boulton. I hope others will follow and help improve typography on the web.

Tags

• Typography

Can you help make this article better? You can edit it here and send me a pull request.

See Also

• Controlling font size using CSS
  Jan 11, 2007
  CSS offers designers a great deal of control over text and has good browser support. Many web designers overlook Typography, a crucial element of design. This article looks at a best practice method for controlling font size on your website.