weblog
Forgotten Times
Times New Roman is one of the most widely used typefaces in the world, as well as one of the most recognisable. The standard default font in nearly all browsers in living memory is Times, and for years when reading content on the web it was the typeface we were stuck with.
Until the <font> tag was introduced by browser vendors in 1995 there was no way of changing the font family except by changing the default font in your browser's settings---which people rarely did anyway, as Times was seen as the obvious choice.
However, as the excitement of designating fonts on the web became more widespread---even becoming a W3C recommendation in 1997---designers rebuked Times fairly resolutely, and it became the emblem of early 1990's web pages. The forgotten font of the web.
Typography Times
With the birth of CSS, web typography was given a new lease of life. Suddenly we had control of line-height (leading), letter-spacing, and word-spacing. But Times missed out on most of these revelations because hardly anyone was using it. At the same time, a school of thought that regarded sans-serif typefaces to be more readable on the screen, struck another blow to Times's hope of a comeback.
Times are changing
In case you hadn't noticed, this article uses the Times New Roman typeface. That might surprise you if you are only familiar with it in its un-styled form---the 1990's emblem. I think this text is really rather pretty.
Let's have a look at how we got from the plain, rather amateur look of the un-styled Times, to what you are reading now. Here is an example of your bog standard, rather embarrassing, default Times.
It is generally considered good practice when selecting fonts to choose from the resident default fonts for most operating systems---specifding because I feel that serif typefaces can have a slightly cluttered feel when on the screen, particularly if the line length of the body text is fairly long, which it is at UsableType. A good rule is to adjust the amount of leading relative to the line length. If you have shorter lines than UsableType then you should probably use a little less line-height, although I very rarely go below 1.4 for body text. This already gives us a distinctly different look.
It is generally considered good practice when selee feel of the text. The best thing to do when applying letter-spacing is to test several values and watch their effects in different browsers.
With that last addition we have the classic Times New Roman typeface looking as good as new, with the finished rule is as follows.
line-height:1.6;
word-spacing:0.1em;
font-size:90%;
letter-spacing:0.01em;
}
It would be great to see a resurgence of Times being used in 2005. Next time you need a serif font for the screen, instead of just typing Georgia without thinking, have a look at Times. Have a play with the CSS, and let's see if we can restore it to its former glory.
Comments:
Another point about Times (and every other serif typeface) is that it looks like crap no matter *what* styles you apply to it if the user's OS/browser does not use anti-aliasing. With OS X or ClearType, serif fonts look good, but on all other configurations, the serifs are just ugly appendages.
Serif fonts are popular in print because subtle serifs at high resolution increase readability quite a bit, but at screen-resolutions, the effect is reversed. Anti-aliasing tends to make low-resolution type act more like high-resolution type.
The 0.01em value should be correct. For this attribute, 0.1em will be enormous.
Re-reading this now I really wish I hadn't put the entire article in Times. The later examples don't particularly stand out because you're already reading the styled Times.
<strong>Mike:</strong> Damn. I've made the classic web developers mistake with that haven't I? You're right, the whole lot looks shit with ClearType turned off.
Still, that's not going to stop people using serif fonts. Georgia is everywhere at the moment, and it would be nice to have an alternative. Times should be that alternative.
Although I prefer Trebuchet MS better,but there are still alot of Times fonttypo in my daily life,and you give a better way to inhance its readability.
I steer clear of IE actually. Opera is my primary browser, and the small <code>letter-spacing</code> value seems to behave similarly between the two browsers.
I like the effect in Firefox however, although as Mike D pointed out earlier, without OS anti-aliasing enabled, the Times does still look poor.
I couldn't replicate the exact kerning problems you described, but perhaps you're right about the inconsistencies. After reader feedback, I am beginnining to believe the <code>letter-spacing</code> value is best left out.
What is clear to me though, is how much nicer looking, and easier to read, the comments are.
I'm going to guess you use IE/Win as your primary browser? It's okay there, but the article text generally looks crap in Firefox; my copy, anyway. If you look closely, the kerning's screwy all over the place. The default Times in the first example box actually looks better than most of it.
Under, "Times are changing," the first line is especially horrible: "case" has a gap in the middle of it, the "dn" in <em>hadn't</em>, "oti" in <em>noticed</em>, "im" in <em>Times</em>, and "ew" in <em>New</em> all collide, <em>Roman</em> has a gap after the "R" and then the rest of the letters are practically on top of each other. The following <em>That</em> has pretty much the same problem.
The knee-jerk reaction is that nobody's going to notice all that, but the great majority of typesetting's effect on people is subliminal in the first place.
To me, Times is fairly useless below 16px, and can look particularly "cheap" at some odd in-between sizes(compare 17px to 16 & 18). Using percentage sizing probably aggravates that effect some since you're not really sure <em>what</em> you're ending up with. Careful styling at large sizes can make it presentable. Georgia is similar(except gorgeous when made big), though a bit more forgiving at smaller sizes, which is why I generall prefer it.
My first thought with this demonstration was problems with kerning in Firefox, too. Like a few have pointed out here, Times seems to work much better as a heading-level element, or larger-than-normal paragraph-size text. Coudal is a great example of this.
Like Mike D pointed out, serif fonts tend to work much better in print media. If you like Times, maybe just add it to your CSS print file instead.
I agree with using Times for Print. Sans-serif fonts always look strange and unfamiliar on paper.
I am thinking of making an update to the demo to remove the <code>letter-spacing</code> value, and see if people's feelings on the kerning in Firefox change.
<strong>Update:</strong> Change has been made to the article.
The kerning's better now. I've never much bothered with letter-spacing other than for small-caps, where that sort of thing is going to be much less noticeable.
err.. Isn't there still 0.01em letter spacing from your #content css tag? Changing the letter spacing values there via the Firefox Web Developer Toolbar certainly alters the article text as expected, although I've not looked your html so see what it should apply to.
The <code>letter-spacing</code> value should be 0 from the <code>#tnrart</code> rule, inside the <code>#content</code> element. It's all got rather complicated, but I don't think I've made a mistake ;) Perhaps try another refresh?
Interesting...
Add your comment:
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
On 23 Jan 05
cboone said:
Excellent. Agreed: the details make all the difference…
One thing: in the first mention of letter-spacing above, you probly mean 0.1em?