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.

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 upin 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.

Reader Comments

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.

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.

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.

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.

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?

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.

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.

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.

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.

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!

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.

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

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.

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.

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.

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.

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? :)

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 :-)

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.

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

Search this site:

About This Entry:

You are reading “Times New Roman”, an entry posted on 24 July, 2003, to the Caught collection. See other posts in this collection.