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.
