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

 .luxury {
        font-size: 36px;
	font-style: italic;
	letter-spacing: 1em;
        font-family: 'Times New Roman';
}; 

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

WEDNESDAY MAY 09 2007 ~ POSTED IN WEB DESIGN ~ TYPOGRAPHY ~ CSS

 .headline {
     font-family: 'Times New Roman';
     font-size: 36px;
     letter-spacing: -.04em;
     line-height: 1em;
     border-bottom: 1px solid #EEEEEE; margin: 0;
}

.meta {
     text-transform: uppercase;
     font-size: 12px;
     letter-spacing: -.04em;
     font-style: italic;
     margin: 0;
}

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

.Fancy {
     font-size: 36px;
     border-top: 1px solid #333333;
     border-bottom: 1px solid #333333;
     line-height: 1em;
     font-family: 'Times New Roman';

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

Who the hell is this jackass?

.caption {
     text-transform: uppercase;
     font-size: 12px;
     letter-spacing: -.05em;
     margin: 0;
     font-family: 'Time New Roman';
}

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.

« Web Design Marketing Podcast (EP 2) – Your Target Market Best Free Project/Time Management Tools »

Comments (12)