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.
Did You Like This Post?
- Author: Ross Johnson
- Date: Wednesday, May 9, 2007
- Comments: 14 Comments
- Categories:
About This BLOG
Since inception, this blog has covered a plethora of topics. Excited by all things design, I spent six years with out a focus. A year ago I discovered my true passion... designing with psychology (primarily as it related to the web). Many thanks to my Web Design Agency, 3.7 DESIGNS that gifts me time to publish my findings.
The Latest Buzz
You should follow us on twitter here.
Popular Posts
We recommend
[...] 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. Read more [...]
[...] Taking Back Times new Roman [...]
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.
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.
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.
[...] may have read over my two posts on the possibility of using times new roman on the web. You may have also noticed the [...]
[...] Back Times New Roman Filed under: typography — Ralph Hockens @ 12:16 am Taking Back: Times New Roman Yes times new roman is ugly, it is overused, and often by amateurs. However we can in fact use it [...]
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.
[...] Pealkirjad ja CSS [...]
I suggest you see this page: http://seedconference.com/
Only Times New Roman, and nobody would actually think it looks bad.
css Font examples , Properties , Attribute – - //
http://www.css-lessons.ucoz.com/font-css-examples.htm
I was trying out Times New Roman in my blog – thus searching for fellow bloggers who might be doing the same !
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…
LOL “Who the hell is this jackass?”….anyway ur helped me to edit CSS codes in my blogger template
thanks…