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)
Nice trend spotting I find it very important to stay on top of design trends if you are a graphic or web designer.
Wow Nice trend spotted. Great post . Thanks for sharing this post.
Targeting other designers always seems to make things easier, but I think it’s still necessary to take those that are not designers into account.
Take, for example, a portfolio website. You may impress all of the other designers out there, but they are not your potential clients. If you’re a design blog, sure, go nuts, but if you’re trying to get new clients – this is something you should avoid.
Cheers
These are great examples.
Good collection. Right now I think I’m going to mainly use serif as an accent font. They can help make certain phrases pop more, but I’m still not sure about making a full serif website.
There are some really good examples in this collection. I especially like the ‘Second and Park’ example. It works really well within in the design and really attracts your attention. Using Serif fonts definetly seems to make a big impression on a website and something I will definetly bare in mind.
I still think Serif fonts sounds … pretentious, ugly, too serious, boring…
Yeah, not a huge fan !
A very interesting post. I had not thought about fonts in quite this way but the sans really creates some interesting paragraphs and headings. Thanks for posting.
Thanks for this interesting post. It is a great inspiriation for designers more often use serif-fonts.
Take, for example, a portfolio website. You may impress all of the other designers out there, but they are not your potential clients. If you’re a design blog, sure, go nuts, but if you’re trying to get new clients – this is something you should avoid.
Nice post! Sans Serif is a good font..in special way for titles…not for a text in the site…for me.
Great examples :3!
serif fonts always portray this very serious and elegant look. i love it a lot personally.
I’ve got to admint, Serif fonts always seem to look nicer. I personally go image replacement or SIFr to implement serif fonts into a design.
I agree, these fonts look great – I especially like Georgia.
Love it. Anyone have an extra license for the Entire Hoefler Text!
Thanks for the refresher on typography. Font-type is really the essence of any website, and should receive as much thought as any other element in the page design. Thanks for the reminder.
Considering serif fonts are designed to lead the eye and enhance visual flow it’s not surprising that they are finding their way into websites that can now forgo browser limitations. Great Article!
I personally go image replacement or SIFr to implement serif fonts into a design.
great examples – lovely and impressive
Terrific Examples