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.

screenshot

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.

screenshot

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.

screenshot

SimpleBits (Baskerville)

By styling the ampersands (&) and the word "by," the overall design is enhanced.

screenshot

W. W. Norton

Another great use of Baskerville.

screenshot

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)

screenshot

Design Intellection (Palatino)

screenshot

Cynosura (Georgia)

screenshot

Black Estate (Times)

screenshot

Bridinel (Times)

screenshot

Made by Sofa (Georgia)

screenshot

Design Work Plan (Georgia)

screenshot

Typographica (Georgia)

screenshot

Biggest Apple (Georgia)

screenshot

Seed Conference (Times)

screenshot

The Swish Life (Times)

screenshot

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-indent with 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)

screenshot

Carsonified (image replacement)

screenshot

For a Beautiful Web (@font-face)

screenshot

Lord Likely (@font-face)

screenshot

Get Finch (SIFR)

screenshot

Noded (SIFR)

screenshot

Brooklyn Fare (Cufon)

screenshot

114 Comments

1 4 5 6
  1. altın çilek
    Feb 2, 2011 @ 6:05 am

    That’s Great! Thanks for the post!

    Reply

  2. hcg damla
    Feb 2, 2011 @ 1:54 pm

    It’s nice to once and for all find a web site where the blogger knows what they are talking about

    Reply

    • Office in Singapore
      Mar 17, 2011 @ 2:37 am

      This is not a nice article. It’s a great article!!! This will really be highly beneficial . Thank you for creating this!

      Reply

      • Gaye Falvo
        Jun 23, 2012 @ 8:34 am

        whoah this blog is excellent i really like reading your articles. Stay up the good work! You know, many individuals are searching around for this information, you can help them greatly.

        Reply

  3. Singapore Offices
    Mar 17, 2011 @ 2:38 am

    This is great!!!This topic is truly relevant to my field at this moment, and I am really glad to discover your blog site.

    Reply

  4. Mark Hamilton
    Mar 22, 2011 @ 10:03 am

    Amazing presentation, I will share it with our team of Web Designer in London and yes nice presentation.

    Reply

  5. Foursseasonssvcs
    Apr 5, 2011 @ 3:24 am

    You have unique business goals and you need someone to make the vision of small businesses in real presence on the Internet.
    Web Application Development

    Reply

  6. alex
    Jun 15, 2011 @ 10:57 am

    Nice work! But i think that those sites will look better using @font-face

    Reply

  7. josh
    Oct 25, 2011 @ 2:29 pm

    Nice article, I really like your touching on websafe fonts as well. I’d like to see a followup with serif fonts and @font face kits. One the general I found a blog that’s pretty good about explaining fonts to clients who don’t know much beyond Times New Roman and Comic Sans:
    http://www.back40design.com/news/m.blog/22/communicate-your-message-through-typography

    Reply

  8. Minnesota Web Development
    Oct 27, 2011 @ 10:17 am

    Great examples, I can’t wait for a simpler way to include fonts in your site rather than using Cufon or Flash.

    Reply

  9. Graphic Design
    May 31, 2012 @ 2:52 am

    Nice example i just love thsi example

    Reply

  10. yates en Ibiza
    Jul 28, 2012 @ 8:00 pm

    Stay up the good work! You know, many individuals are searching around for this information, you can help them greatly.

    Reply

1 4 5 6

Leave a Reply