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)
What about Rockwell? I am seeing it everywhere lately in TV and print, and now creeping onto the web. Is it only via sIFR or are there any examples of Rockwell bold out there using direct references or @font-face?
Palatino should be removed from the web-safe font list. It’s only installed on OS X if Classic has been installed. Aside from that, Safari doesn’t render the Palatino Bold or Italic.
Excellent post! Much like dropping outdated HTML commands de-emphasized the need for tacky “best viewed with” notices and the need for alternate pages, I think designing for the audience with regards to fonts will positively affect the need for more variety in and solutions for the many difficulties a designer faces with web fonts. Thanks so much, lovely screencaptures as well for inspiration and examples. Have a swell day.
Thanks for the kind words, Nick! http://fontdeck.com/ is something I’m involved in that’s also worth keeping an eye on for web fonts in the future. All the best to you and your readers.
Very nice. this new trend will make websites more exciting and enjoyable to view. All of these examples show the potential.
I think that “We are Sofa” just wouldn’t feel the same with a sans-serif. Can you just imagine what it would feel like to sit on letters with such sharp edges?
I like serif fonts, but always come back to Helvetica
interesting. Thanks.
I’ve been using serif fonts for particular styles of projects for a long time. I don’t see why this is going to be considered a trend per se, but the sites you ahve posted are really beautiful and definitely note-worthy. Georgia is a fantastic font for web, in my opinion.
A good one that you missed is the newly re-designed latimes.com which uses “font-family: Georgia, ‘Times New Roman’, Times, serif;” for all of their headlines.
Muy buen blog de diseño grafico! great blog! thanks from Argentina.
There are some really nice sites here… the sushi and robots website is lovely but the footer text display horribly for me.
‘We are Sofa’ = Brilliant! :)
nicely done.
I must be trendy as my site uses Georgia!
Yay for me.
please go to http://sugarloot.teen.com/entry/687651792 and vote me a 10! tryin 2 win a giftcard!
Never thought about increased screen resolutions and the dreadful IE effecting fonts. Good point, well made.
路过，帮你踩踩！
sIFR is great but it tends to break particularly in Google Chrome.
Its very locomotive web design. really I’m always fascination in web designing side. But I ‘m new this side, may be try to best afford ahead. Ok, thanking for good blog side.
I love the showcase of beautiful non web safe fonts. It’s interesting to experiment with different fonts when you’re main audience is designers with tons of fonts installed.
One thing you should mention to is Typekit. I think that has a lot of potential for opening a wide variety of fonts for everyday use and it doesn’t depend on what the viewer has installed.
Never knew how many people were using Baskerville in their sites. I’m currently using it one my site as well as Cufon to ensure everyone see’s it, not just designers. I have found that Cufon works really well if you want to use non web safe fonts. Good Post!
Surely the Serif font trend has been catching up more and more grass in web development. More and more better designed websites having been coming up in the internet.
I’d also like to test the Serif Trend too.
Very interesting, great sites. Cufon link won’t work for me :(