style guide
Introduction
We all know what typography is and what it does, right? So why is web typography such a thorny subject?
The problems with web typography started when designers got involved with the web. Before that time, the web was used mainly by techy type guys who wanted to share and link information. It didn’t matter to them whether they were reading beautiful 12pt Times Roman or plain old monospace Courier.
When the web went consumer in the early 1990’s, people suddenly cared about what typeface they were reading or how large the font was. Unfortunately there was no way of defining these things.
To cut a long story short, after years of adapting a markup language (HTML) to incorporate presentational features such as font types and sizes—something it was never intended to do—we were finally given CSS and a light shone down from above.
But what should we do with CSS? And how should we do it? That’s what the style guide is here to explain.
The Print Legacy
Perhaps unsurprisingly the first web designers (people who cared about making the web look good) had a background in print design. Naturally they took this as a starting point to develop their new skills. However, as time progressed we realised that the web, being a totally different medium to print, needed a rather different set of rules. Lets start with the obvious:
Web pages can be different every time they are loaded. Browsers create the pages we see on the fly, and the finished page layout can depend on:
- Size of browser window
- Screen resolution
- Operating system
- Default font size
- User style sheets
What could be further removed from the printed page? Other differences are perhaps less obvious but just as relevant.
- The typical area on a computer screen where web text is read is smaller than that of most magazine or books.
- Computer screens render text and other components at anything between 60 dots per inch (dpi) and 100 dpi. Most magazine or book text is printed at about 1200 dpi.
Leaving the Page Behind
A good example of how web typography has developed over the years is the way in which designers determine the font size for text.
Designers with a print background where understandably familiar with the convention of sizing text in ‘points’. This is the standard for printed typography and CSS allows for designers to declare font sizes using points. All well and good, right?
Well, as it turned out… not that well or good. In the early days of CSS, setting font sizes with points created rather varying results on the Windows and the Macintosh platforms. Text set at 7pt type would be 9px tall on Windows and 7px tall on Macintosh. Now, if 9px size text is hard to read - which it is - then 7px is positively illegible.
These variations led us to realise that a better method was needed. If you want to know what it is then read the font style guide.
This is just one example of why learning the theory behind web typography is so important. It doesn’t just make your pages look better, but it makes them more accessible and more readable.
Previous Posts
Latest Links
- Trumpet Quartet
- Bella Tromba this week recording at EMI with Kanye West.
- Are we designers or developers?
- I struggle with this one as well. My title at work is Software Engineer as well, which doesn't help matters.
- Dear W3C, Dear WaSP
- I'm not sure what I think about this. There seems to be a lot of general moaning about this stuff and not very much doing (with a few notable exceptions).
- The King of Web Standards
- Jeffrey Zeldman crowned by Business Week Magazine
- iPhone Javascript and spec benchmark
- Interesting JavaScript benchmarks on the new iPhone vs. Mac Book Pro
