Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Times New Roman

July 24, 2003

It’s time we take back Times New Roman on the web

Since 1994, nearly all browsers have shipped with Times as the default font. Up until the introduction of the <font> tag, the only way it could be changed was if the user reset her own default. Most of the web was viewed in Times, and when a way to change that finally appeared we quickly embraced it and never looked back.

So why the continual shunning? It’s a good font. Designed in 1931 for The Times of London, it has become the de facto standard for digital imaging. While not as pixel-precise in its on-screen rendering as Georgia or Verdana, it still does a fine job. But still we ignore it, unless we specify it as a last resort for the lunatics viewing our site who even now don’t have Georgia installed.

No more. Used in new and inspiring ways, Times can be beautiful and fresh, and a brand new old tool in our pathetically limited web type case.

First of all, let’s examine leading, or line-height as it’s known in CSS. Padding the space between each line is the easiest way we can reinvigorate Times, and probably the most effective. Consider the following:

I never thought about it in as much detail. As a kid, who has time 
to consider the future, anyway? There are far too many bikes to 
ride, forests to explore, and sprinklers to run through to worry 
about growing up. As a kid, there’s no future because life is all 
about living in the present.

Very 1994. Let’s add some leading:

I never thought about it in as much detail. As a kid, who has time 
to consider the future, anyway? There are far too many bikes to 
ride, forests to explore, and sprinklers to run through to worry 
about growing up. As a kid, there’s no future because life is all 
about living in the present.

Already we’ve managed to drop the ‘unstyled text’ look and move into something more typographically pleasing. What I’ve taken for granted is that the text is also constrained. 500 years of typographical study have determined that for maximum legibility, line lengths should be no more than 80 characters and no less than 40 characters. 65 is a good ideal to shoot for. The early web allowed no such control without a mish-mash of ugly <p> and <br> tags, but CSS lets us get around that by limiting widths and setting margins. Doing so automatically casts off a bit of that early web stigma.

Body text may be re-sized of course, and picking anything other than 16px Times moves a further step away from the early-web look:

I never thought about it in as much detail. As a kid, who has time 
to consider the future, anyway? There are far too many bikes to 
ride, forests to explore, and sprinklers to run through to worry 
about growing up. As a kid, there’s no future because life is all 
about living in the present. (source)

One more white space trick before we move on: word-spacing, which only works in relatively new browsers:

I never thought about it in as much detail. As a kid, who has time 
to consider the future, anyway? There are far too many bikes to 
ride, forests to explore, and sprinklers to run through to worry 
about growing up. As a kid, there’s no future because life is all 
about living in the present. (source)

Body text is easy enough, but what about headlines? We’re all sick of the bold 32px Times look of an unstyled h1, after all:

A Pocket Full of Rye

A solution is again white space, in the form of letter-spacing:

A Pocket Full of Rye

This does a bit, but it doesn’t go quite far enough. It still feels like a browser war-era headline, and that has to go. So to mix some bad metaphors, let’s open up our arsenal and really give this some juice. See you on the other side.

A Pocket Full of Rye
(font: 500 italic 32px 'Times New Roman'; 
letter-spacing: 0.1em;)
A Pocket Full of Rye
(font: 100 32px 'Times New Roman';
letter-spacing: 0.1em; text-transform: uppercase;)
A Pocket Full of Rye
(font: 900 32px 'Times New Roman'; 
letter-spacing: -0.1em;)
A Pocket Full of Rye
(font: italic 32px 'Times New Roman'; 
letter-spacing: 0.3em; text-transform: lowercase;)

Did you get that? Each one is 32px Times New Roman, the same font as a default h1 in many browsers. It should be noted that ‘px’ is a good unit for on-screen consistency, but it’s rather bad for accessibility. For our purposes right now, I’m trying to match the common browser default for h1-sized text so it’s not as important, but more information on font sizing on the web is available, and indeed something you should read.

Before we’re done, let’s try playing with our CSS and applying some typography tricks to bring out the best from Times New Roman:

To a boy growing up in central British Columbia, 
hockey cards were a big thing. They were what you did during your 
spare time on lunch breaks, they were what you talked about with 
your friends. More than just printed pieces of paper with colour 
photos on the front, they were entertainment, currency, and a sign
of social status. (source)
To a boy growing up in central British Columbia, 
hockey cards were a big thing. They were what 
you did during your spare time on lunch breaks, 
they were what you talked about with your friends. 
More than just printed pieces of paper with colour 
photos on the front, they were entertainment, 
currency, and a sign of social status. (source)

You get the idea. Now it’s up to you. Don’t be afraid of Times — embrace it, love it, and learn to use it well. The web will be better for it.

update: I’ve added this PNG comparing Times to Georgia with and without Cleartype rendering.

Comparison: Times vs. Georgia, Cleartype vs. aliasing

See explanation.


Reader Comments

1
Keith says:
July 24, 02h

Well, I’m sold. Thanks for the great examples and the refresher. I’m one of those designers that has had a mental block on Times for quite a while now. It’s just a font I never really conisder. And here I was thinking I was the only one.

2
Arikawa says:
July 24, 03h

Been singing the gospel for awhile now, Dave. ;-)

3
Sunny says:
July 24, 03h

When I read abt the padding between lines (by specifying a line-height, I immediately thought abt Arikawa’s website. He uses the technique, perfectly! Kudos to you for the awesome type on your site.

4
MikeyC says:
July 24, 03h

Eric Meyer recently redesigned his site and the default stylesheet uses Times New Roman/unstyled text extensively. Would this qualify as a meme or must it propagate a bit more?

5
Dave S. says:
July 24, 04h

Would this qualify as a meme or must it propagate a bit more?

Doubt it. Unstyled text is still unstyled text. Styled Times is a completely different beast.

Arikawa - and so you have. Nice job of it, too.

6
Chris M. Cooper says:
July 24, 05h

Wonderful examples, Dave. Sometimes it’s very difficult to be open-minded and sensitive to the typographical needs of the web, but you seem the perfect soul to do it. You’re like… a visionary or something.

7
skinnyj says:
July 24, 06h

All good responses. I have to say, however, that I was under the impression that leading (in typography) referenced the amount of space in between letters rather than the space between the lines.

8
Dave S. says:
July 24, 07h

Lead — [Rhyming with red] Originally a strip of soft metal (lead or brass) used for vertical spacing between lines of type. Now meaning the vertical distance from the baseline of one line to the baseline of the next. Also called leading.

— The Elements of Typographic Style, Robert Bringhurst

9
July 24, 07h

If i’m not mistaken, “kerning” is the word used to specify the space between letters. “Leading, ” as Dave says, refers to line height.

10
Michael says:
July 24, 08h

I read an article not too long ago from HumanFactors that said that while the rule of 80/40 was widely held to be “true” modern studies have found no such evidence that it must be so. Reading speeds and understanding appear to be the same despite varying line lengths and in the end it comes down to what the user prefers and not necessarily what’s ‘best’.

So the question comes up; do we prefer the 80/40 just because it strikes some cord in us or because for 200+ years it’s been the ‘standard’ in typography and we’re trained to feel comfortable with that length.

11
tre says:
July 24, 08h

Actually, “letter-spacing” is the correct term for spacing between letters. Kerning refers to spatial relationships between specific pairs of letters and can differ from one typeface family to another. Some common problem pairs like ‘To’ or ‘Wa’. Aren’t we such geeks?

12
Sonia says:
July 24, 09h

Nice work Dave.

Was this at all inspired by Doug’s use of serif fonts (not sure just what they are) on the adaptive path redesign? That man is a master with typography.

13
jon says:
July 24, 09h

DAG SON times new roman is my least favorite font – i’m hardly a fan of any serif fonts. You make it look nice. One thing i am a fan of, is tight spacing , so that

{font: 900 32px ‘Times New Roman’;
letter-spacing: -0.1em;)}

is crazy appealing.

time to bite, er appropriate.

14
Dave S. says:
July 24, 10h

Jon — you have to ask yourself then, do you hate it because of its ubiquity on the web?

Laziness and inexperience both create poor visuals; pages thrown together with no typographical consideration use Times, so you begin to associate it with bad or lazy design. Not to mention that an ‘unstyled’ document is usually rendered in it. Both of those go a long way to explaining why it remains under-utilized.

15
doogxela says:
July 24, 11h

I have to say that I am not at all sold. I find Times New Roman very annoying to read, at least as body text. I find that sans-serif fonts are much easier on my eyes for body text, and using the serif fonts for the headlines works quite nicely. Times does not render well in Windows 2000 on an lcd. The curves and angles are very pixelated. I can’t even read the italicized body text; it is far too annoying. The techniques you use are quite handy and I might try messing around with them at some point, but I will be keeping myself away from Times, thanks all the same.

For what it’s worth, I don’t actually define the exact font on my site. I leave it up to the viewer to decide. I only define serif, sans, or monospace.

16
July 24, 11h

The use of color can also enliven Times (or any font, for that matter.) I think a lot of the perceived beauty of Georgia is that it is so often presented in colors other than black on white. The designers who employ Georgia tend to use a variety of fore- and background color combinations that add a lot of interest. Doing the same to Times would adds to its character, as well.

Another thing that helps… better on-screen font rendering thanks to ClearType and other anti-aliasing algorithms (but ClearType, especially.)

17
ss says:
July 25, 01h

I don’t actually define the exact font on my site. I leave it up to the viewer to decide. I only define serif, sans, or monospace.

But when was the last time you actually knew someone who defined these fonts in their browser? For me, I think it was around 1996, when that feature was first available. So in other words, you use Times, Arial and Courier.

18
Jai says:
July 25, 06h

Nice job with Times! Honestly, I still am not sure I like it, but you’ve certainly made it more acceptable in my mind. To me, though, the Times New Roman font at large sizes looks too pixelated. Look at the “R” or “Y” in your (font: 100 32px ‘Times New Roman’; letter-spacing: 0.1em; text-transform: uppercase;) example. Doesn’t the “slant” look kind of jagged? That’s just the nature of the font, I know, but I don’t like that so much. But I must say, on the smaller font sizes, you made it look appealing, and I maight try to use it myself someday.

That’s success on your part- taking designers from “Times? I’ll never use that nasty font!” to “Yeah, with a little stylin’, Times might be the right font for the job!”. Thanks!

19
July 25, 07h

Since I got namechecked, I’ll pop in to say that the default meyerweb theme, “Eos,” does use what I would call minimally styled Times:

font: 100% “Times New Roman”, Times, TimesNR, serif;

Personally, I think it works well with the design into which it was placed, perhaps because I started with Times and designed around it (to the extent that I can be said to design at all). But you’ve prompted me to play around with some variations on that theme, maybe spreading stuff out just a bit, to see if I like it any better.

As for Web typography in general, I complained about size a while back. I’d love to see you tackle some of those issues, Dave, in the same lucid and compelling manner you did here.

20
Arikawa says:
July 25, 07h

ClearType and Quartz rendering makes all the difference in the world.

Everytime I look at a Times New Roman typeface especially when it’s been set to a smaller size on my Windows 2000 test machine—which has been set to smooth edges of fonts as much as possible—I want to cringe. And italicized? Oof. So this is the look that everyone complains about.

But we perservere in the hopes that the majority of viewers will have a ClearType or Quartz enabled environment, and those that don’t can stop calling us “Mr. Jaggy.” as in Jagged, not Jaguar

21
Dave S. says:
July 25, 08h

I’ve appended a PNG to this post comparing Times New Roman to Georgia on Firebird/XP — rows 1 and 3 are Times, rows 2 and 4 are Georgia. No anti-aliasing on the left, ClearType on the right. They run from 10px to 14px.

I’m finding that non-anti-aliased Georgia looks almost as bad as Times at 10px, is that just me? I’d say 11px is the sweet spot for both of them where they start becoming more easily readable.

Like I said, Times wasn’t designed specifically for on-screen use, but seeing it next to a font that was shows that it sure does a hell of a job, considering.

22
Jai says:
July 25, 08h

Dave’s been reminiscing about Music School or something… Every Good Boy Deserves Fudge! That’s an acronym for the lines on the treble clef (A.K.A. G-clef)! HA! That’s great. Thanks for the comparison. Definitely 11px is the sweet spot. Anything below that on either font, anti-alias or not, looks kind of… lacking.

23
July 25, 10h

No wonder we don’t get to see too many real-world examples of great design like this…either Dave is too busy writing an article or everyone else is too busy posting comments :)

24
Peter says:
July 25, 12h

Arikawa, I have a P41.7Ghz laptop running WinXP and I have cleartype disabled - it slows the machine down too much. So it’s not just people with Win2000 that view fonts without cleartype…

25
Andy says:
July 25, 12h

From what I learnt back at University, Serif fonts are supposed to be easier to read than Sans-Serif cause of the little hooks and spikes which allows the eyes to glide from one letter to the next. I wonder is it because its non-accurate pixel placement on screen that makes it worse than it is on print.

26
Sophie G says:
July 25, 12h

The 80/40 rule.
I think the best way is to have the main content resize with the window so that the user can adjust the width of the browser window to read a long text page comfortably. I know people who adjust columns to something not to my personal liking at all, so tastes must differ.
Using ems as column width can give a good starting point at page load.

27
Warren says:
July 28, 12h

Yet another post of yours bookmarked under “CSS Resources”. Good show!

28
jon says:
July 29, 07h


you have to ask yourself then, do you hate it because of its ubiquity on the web?


partially so–however, i’ve been seeing verdana for a few years now as well, and it doesn’t bother me nearly as much as times new roman…let me qualify. i’m not a typeface specialist, i just know what i like when i see it–there’s one incarnation of Times that brings me nothing but good feeling–a page printed using LaTeX. The reason is because when i first was in college, this was the only real way to print a page that looked decent. I made sure I mastered LaTeX just so my reports looked better than the other underclassment who would use the default printer font. For that, i guess, it holds a place in my heart. However i do submit that the spacing of a “default” LaTeX document is different than the first documents i read in something like MS wordpad. It looked less elegant.

Having said that, i’m nearly sure the reasons are psychological and not visual…but then again–what isn’t? :)

j.

29
August 04, 03h

Goudy would gasp. You would steal sheep?!

30
Dave S. says:
August 04, 04h

Ah, but Tom, are we talking about blackletter or lower case? Oh wait. I used both.

No sheep are safe.

31
Nic says:
August 06, 09h

Hmm, interesting debate. The reason I do not use Times New Roman, or any Serif font, for that matter has to do with accessibility.

Several organization operated by and/or for people with low-vision and blindness strongly recommend the use of a sans-serif font to make it easier to read.

For instance, the American Foundation for the Blind:
http://www.afb.org/info_document_view.asp?documentid=210

This is a choice *I* made. It is not necessarily the right choice in all situations. But when my blind friends tell me that something’s easier for them, hey, I listen and try to implement when/where I can :-)

My 2 cents, your mileage may vary :-)

32
Al says:
August 15, 04h

I had always looked upon Times New Roman as the “ugly font” when its used in its navive format on the wed i ushally see it as a mark of bad design. However this guide has really changed my opinions on the font. I may well intergrate some of you tips into a futures design. Inspirational stuff.

33
Tom Quinn says:
September 26, 05h

Dave

I have had this article bookmarked for a while now because I knew it would come in handy. And it did - I have just converted an intranet site from a graphics-based site (images used for breakout quotes from articlesetc.) to a CSS driven site, and TNR fitted the bill for the breakout quotes. Normally I would never consider it but after reading this I thought “hmm, this may look quite good” - and it does. Cheers

tq