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.

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:

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

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

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

See Also