May 9th, 2007 / Ross Johnson / 14 Comments

CSS Typography – Taking back Times new Roman

Taking Back: Times New Roman

Yes all designers HATE times new roman, but let’s face it — on the web we are very limited on what fonts we can safely use. I don’t know about anyone else, but I am getting a little board of seeing Georgia as the only serif font on the web.

However there is hope. Yes times new roman is ugly, it is overused, and often by amateurs. However we can in fact use it to our advantage with the power of CSS and typography.

Using font sizing, weight, spacing, and leading we have a huge variety of options to tweak times new roman into something attractive. I am of the personal opinion that times new roman at small sizing is just plain hard to read. However if we blow it up we can see some of the more of the subtle styling of the font.

Luxury and Headlines

Look what we can do with just a larger font size and some generous letter spacing

Whitespace is luxurious

Maybe a blog with a touch of class? We can use larger fonts, pull in the letter spacing, and add a bottom border for a very nice effect.

What if you wanted a blog headline with a classic touch, but were sick of the same old Georgia headlines?

Headlines Contrasting Large and Small


Pulling the letter spacing in on the headline really helps the serifs of each letter lead towards each other helping keep the flow of the word together. The tight letter spacing on the bottom keeps the meta data looking short and succinct, with the italics further communicating motion.

Fun with borders

A unique and fancy headline

The borders really draw attention to the ascenders and descenders. Each which have their own look and feel. By using italics and non-italics, it creates a contrast between the descender of the y and the q.

What about captions

We can even use small type with tight spacing to create some nice looking photo caption’s

Look at this jackass

Who the hell is this jackass?

There are plenty more options and uses for times new roman, don’t be afraid to use it. Like Comic Sans, it has gotten a very bad wrap — however that doesn’t mean that there are some nice uses and implementations for both fonts.

14 thoughts CSS Typography – Taking back Times new Roman

  1. Pingback: Taking Back: Times New Roman

  2. Pingback: » Web Typography - 32 sources for inspiration and instruction - Web Design Marketing Podcast & Blog

  3. Love it, great article. I think everyone should swing back to Times New Roman. letter-spacing is key.

    I also read somewhere that of all webfonts, Times New Roman at about 16 point italic, is the most readable.

  4. I’m not sure which is worse, the many spelling, punctuation and grammar errors, or the suggestion that an ugly, awkward font should be mangled into usefulness because another beautiful font is oft-used. Well-used, finely crafted fonts are in no danger of going out of style.

  5. If you fail to take risks in design you will be stuck with the same uninspiring work time after time.

    Thanks for the comment, even though your viewpoint differs.

  6. Pingback: » Thoughts on Type - Web Design Marketing Podcast & Blog

  7. Pingback: Taking Back Times New Roman « Ralph’s Weblog

  8. Not all designers hate Times New Roman, which by any means isn’t (to quote Nate) ugly or awkward. It’s more the matter of what you can craft out of it really. Good read, and hopefully enlightening for those jumping on design-cliche-bandwagons every so often.

  9. Pingback: Recycle Bin » Blog Archive » Stiililehe põhi

  10. I suggest you see this page:

    Only Times New Roman, and nobody would actually think it looks bad.

  11. I was trying out Times New Roman in my blog – thus searching for fellow bloggers who might be doing the same !

  12. Excellent pub! Was looking for the specific css code for ‘times new roman’ and think I have found it… I will go try to use it in my stylesheet.css now. Moreover, some additional posts you might consider, are where to put the css code for changing to titles of the pages. In other words, in the dashboard of WordPress, we all know of the great big title is a short version of our thesis, but most of us all don’t know where exactly to put that code. Never think to big, the little people are fighting back! haha…

  13. LOL “Who the hell is this jackass?”….anyway ur helped me to edit CSS codes in my blogger template 🙂 thanks…

Comments are closed.