In the past, we've been told not to use serif fonts due to its readability on low resolution monitors and poor rendering in WindowsXP. Now, with display technology advancing and IE7+ supporting ClearType by default, I think it is about time to change that rule. Take a look at the example sites that I've collected, you will probably agree with me that serif typeface will be the next web font trend.
Non-Web-Safe Fonts
If your target audiences are designers, don't be afriad to to use the non-web-safe fonts such as Baskerville, Adobe Caslon Pro, Garamond, and Goudy Old Style. If your visitors are designers, the chance of them having those fonts installed are very high plus some are pre-packaged in the Adobe suite. Below are some good sample sites that use non-web-safe serif fonts.
Sushi and Robots (Hoefler Text)
Jina uses Hoefler Text as her main heading and body text. The headers look amazing by combining the uppercase and italic style.
Jon Tangerine (Baskerville)
From head to toe, you've got to agree Jon has a beautiful sense of typography. I was impressed to find that the logotype is not an image, just CSS. The main font used in this site is Baskerville.
Rustin Jessen (Baskerville & Adobe Caslon Pro)
Rustin combines Baskerville italic and Adobe Caslon Pro uppercase to create a nice typographic contrast for the category titles.
SimpleBits (Baskerville)
By styling the ampersands (&) and the word "by," the overall design is enhanced.
W. W. Norton
Another great use of Baskerville.
Web-Safe Serif Fonts
Below are some example sites that use web-safe serif fonts such as Times, Georgia, and Palatino. I find Georgia is a bit over used in most modern websites, so I highly recommend Times and Palatino.
Design Taxi (Georgia)
Design Intellection (Palatino)
Cynosura (Georgia)
Black Estate (Times)
Bridinel (Times)
Made by Sofa (Georgia)
Design Work Plan (Georgia)
Typographica (Georgia)
Biggest Apple (Georgia)
Seed Conference (Times)
The Swish Life (Times)
More Examples...
Here are couple solutions for those who want to use non-web-safe fonts but afraid the visitors might not have the fonts installed.
- Image Replacement - Embed your text in an image and use
text-indentwith negative value to hide the text. - SIFR - Use Flash and Javascript to replace the text.
- Cufon - An alternative to SIFR, faster and easier.
- CSS @font-face - It allows you to reference fonts that are not installed on end user machine. However, this CSS rule only works in some modern browsers.
Second and Park (image replacement)
Carsonified (image replacement)
For a Beautiful Web (@font-face)
Lord Likely (@font-face)
Get Finch (SIFR)
Noded (SIFR)
Brooklyn Fare (Cufon)
Thanks a lot for this post, Nick!
I’m very excited about the new opportunities for using a wider variety of fonts for the web, since I always loved typography a lot.
I think its great that you show some samples of sites using different techniques too. That’s very helpful :-)
I’m well pleased with this post! The sites are lovely and right up my street as I love my serif fonts. Also, the ampersand in Baskerville is something I’ve seen used a lot though have never been able to track down, I’m gonna be using it as it goes out of fashion :(
I was wondering what the sushi & Robots font face was too, lovely stuff
I’ll try the serif font, If have a new site to build.
i guess it’s already a trend for quite some time, great collection here
check out fontsquirrel.com for nice free serif typefaces for @font-face embedding
Great list of sites – we use Georgia over at our web design forum
I love serif fonts, lots of designers seem to stay away from them, but as this post proves — if styled correctly they look fantastic.
loved the site collection and the font examples from serif fonts family.
And even more exiting to use it in CSS, not a n image.
This is the first time I can say I’m ahead of the game; I’ve been using serif fonts on some of my sites lately and have seen many others doing the same. Hooray! :D
To what extent are there limitations in using Times / Times New Roman solely because it has long been the default web font? I must admit that if I see it on the web now, my immediate reaction (however unfounded!) is still “Guess they forgot to set their font family”. I love it, as a font, but I wonder whether the baggage it comes with is restrictive.
This is one of the most useful blogs I read. And I read a lot of blogs. Like, a lot.
Really well done.
Serif fonts became popular again when ‘glossy’ designs exploded everywhere a few years ago, what some people call Web 2.0 designs, though I’m not sure that’s an accurate label. Anyway, nothing new here, but thanks for encouraging us to use non-web safe serif fonts.
Oh my goodness me … does nothing stand still on the web?
Seriously, many thanks for your post which is cause for reflection ….
love this blog
The quality of the articles on this site is getting better every month. Keep up the good work.
hmm, i do not know sushi robot using serif font, i like jina with his co authored book about css, i follow his tutorial, i like this article
I’ve become very fond of Baskerville recently, especially as it is installed on many computers.
However, I still personally find myself avoiding the use of Times Roman; so it’s good to see your example websites using it well.
Nice collection. Thanks.
and must mention : a very nice design. I simply love it
Great research – I’ve noticed this trend appearing too.
Nice design! :)
I must admit I’ve also been noticing this trend loads recently. It really adds a certain class to a website, when used well.
I’m all for it being used more and more in the future
Bookman old-style has always been a nice alternative to Georgia as the “other” standard serif font.