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)
Awesome post
I thought that the general rule was that serifs are okay for headers, but not for paragraph text? I personally have Clear Type disabled because I don’t like how it treats smaller font sizes.
I agree. I always use georgia, but now i’m gonna try Platino :) Thanks for the inspiration !
nice thoughts
manuel
Great showcase of examples. Inspiration for the well spotted trend :]
Its dangerous to presume that designers have any fonts available on their system other than those considered web safe. Most designers I know use some sort of font management system to keep the number of active fonts low for performance reasons. Meaning that quite often the ‘safe’ set of fonts available on my machine is actually smaller than a regular users.
But I do have to agree that serifs will certainly become more coming in the next few years on the web, in my opinion because of the increasing font display options that don’t rely on the user having the font on their system.
Nice examples!
An other solution for using non-web-safe fonts is typeface.js http://typeface.neocracy.org/
Gorgeous examples.
but I don’t like serif in paragraph text, it’s hard to read.
Fantastic collection of serif typography fonts… many of whom use web-safe fonts!
As per readability, I remember reading the san-serif is easier to read in short paragraphs and line-lengths, but serif is easier to read in larger amounts. Anyone hear anything like that?
Cool
Tks!!!!
Great collection! What I don’t understand is why more people are not using @font-face. Internet Explorer has had support for this since version 4 (using eot files), and most modern browsers have support with CSS3 (Safari, Firefox, Opera, Chrome soon). Judging by my own website statistics this hits 95+% of people, and is only going to improve.
I know it’s not perfect…but it does seem to be the way web fonts are going. Anyone have any thoughts on this?
They certainly look elegant. I’m using Palatino more now – apparently it’s used a lot in book printing as you can read it faster than other serifs.
I am using cufon on a few of my sites ;)
Georgia and Palatino have always looked nice to me and my favorite method from the above is SIFR still. Thanks for this nice collection.
It seems I’ll have more job to do :-P
Great roundup, also don’t forget about http://typekit.com/ although its still in beta, it’s looking to be pretty promising and worth mentioning, sign up and check it out if you haven’t already.
WOW! This is an awesome round-up. Sushi and Robots is just so nice! I’m so jealous of that website.
I totally agree, the days of only using non-serif fonts are long gone by. A beautiful serif typography will always flatter and catch my eye.
I’m not sure if I just like them so much because they have been missing on the web for such a long time… :) I do especially like mixtures with non-serif fonts, where the serifed captions pop out all the more.
Some excellent websites here to support the new trend. very inspirational in both takes. Thank you.
very nice post. this should open up for these fonts disregarded before since browsers doesn’t have support for cleartype technology.
thanks NL. God bless