Sep 22
The Next Serif Trend
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)
CSS: Design Out Of The Box Design Process of Koi Illustration
Comments
Pages: 9 8 7 6 5 4 3 2 1 » Show All
There are 88 comments (+Add)
Pages: 9 8 7 6 5 4 3 2 1 » Show All
Loading ...
88 Ross Lund http://www.mankatopcsolutions.com
February 8th, 2010 at 9:28 pm
great examples… very nice!
87 Mankato PC Solutions http://www.mankatopcsolutions.com
February 8th, 2010 at 9:27 pm
Awesome Examples!
86 Ofer http://onearmfrog.com
February 1st, 2010 at 4:02 pm
I’ve been using Cufon for some time now - It’s WAY better than SFIR.
It’s non-flash, it doesn’t mess up jquery sliding and other effects..
Recommended!
85 BlesS http://www.facebook.com/profile.php?ref=name&id=1659584079
January 28th, 2010 at 10:45 pm
My opinion is similar with keete,
Sanselif font is more difficult than Arial.
seems like hard.
Itelic style and more decorate, it’s uncomfortable.
It makes the trend for next but it will unformur.
84 Prasanta Baruah http://www.janmoni.com
January 22nd, 2010 at 5:59 pm
Thank You. I am from Assam (India) & I am going to launch my website shortly. Your informations are very Useful to me at this stage. I need Help from all the experienced persons who having gained skill in this field over time. Thanx.
83 Keefe http://www.yun4.net
January 14th, 2010 at 11:12 pm
I think the main reason these serif fonts worked so well is partly due to the fact that they are sized at a larger size. If the serif fonts are sized at
12pxlike your site, it’ll probably be harder to read.82 vincentdresses http://www.hibridal.com
January 6th, 2010 at 2:02 am
喜欢你们的设计与技术，常来看看
81 oliver
December 28th, 2009 at 9:03 am
Hey guys! Seems there is a new free font site out there called http://www.fonts2u.com. Seems pretty nice.
Offers a really cool search engine. Check it out .. I am quite happy with it.
80 Minneapolis Web Design http://www.mankatowebdesign.com/
November 20th, 2009 at 7:07 pm
Terrific Examples
79 Matt Peschong http://www.mankatowebdesign.com/
November 20th, 2009 at 7:06 pm
great examples - lovely and impressive