Great looking fonts are not reserved for those beautiful, sometimes elaborate, headers. Put some thought into your choice of base fonts, the default fonts on your website. Do not just settle for Arial, Verdana and Georgia only. Why put so much effort into designing and finding the perfect, awesome, totally unique display font for your website if you are simply going to settle for one of the defaults to support it? An amazing display font and a matching, great-looking typeface for the body creates a complete and polished final design. Dig deep and do some research on some amazing font stacks. It is a treat to stumble onto a website that uses a creative font stack to create a comprehensive experience and polished presentation.

A website’s font stack has the power to create a character and personality that is not obtainable with the basic font choices. The first website that brought this to my attention was dropbox. While using their web app one day, I noticed they use a single typeface on their website that I have never seen before. They had taken ownership of a look that is not obtainable without this unique font choice. This font was so intriguing that I dug in a little deeper to explore. Turns out, their font stack was quite creative. Segoe UI was being used as the primary font and the appearance of this font is quite a treat for anyone having that on their computer. I noticed another example of the effect of body fonts when I viewed facebook for the first time on a PC and not my Mac. Facebook was not the same without Lucida Grande. The experience and design of websites is not of the same caliber when fonts that are bland and have been used for so many years on the web are applied when better fonts are available.

Dropbox font stack
{ ‘Segoe UI’, arial, verdana, ‘lucida sans unicode’, tahoma, sans-serif; }

The rough animated gif examples below show the differences between a basic base font choice and the font choice the design team eventually made. The difference can be see much better if you check out any of these websites in your browser and change the font with FireBug or any of the built in inspectors. It is much more obvious

Apple

This is a section of Apple’s Mac Page. The typeface Apple uses is “Lucida Grande”. This type face has a bit more personality than their competitors, Arial. It all has friendly characteristics with the softer curves and less ridged letter forms.

iGoogle

Google chose to use Arial as their base font. They probably made their choice for a number of reasons, but Google’s content focused, down to business mentality works well with Arial.

Dropbox

Dropbox uses Segoe UI which comes with new versions of Windows. Not everyone will have it, but it is a treat to see it if you do. Has similar characteristics as the humanist sans-serif Lucida Grande with softer curves, but also has a great looking italicized style.

Now, I am not saying Arial, Verdana and Georgia should be forgotten, but we are supposed to be creative as designers. I am setting a personal goal to try and use creative font stacks that will be both a treat for most users, degrade gracefully, remain functional and be appropriate for the client. Please, no Comic Sans or Papyrus, even if you think you are James Cameron.

Reblog this post [with Zemanta]
Comments
  • Great post! I used to use Arial for all of my designs, but recently I’ve been using Typekit.com to explore different fonts.

  • Thanks for the heads up Ryan! I saw this linked from Jason Santa Maria’s blog, but never followed through with it. TypeKit looks like a solid solution. You notice any downsides of it yet? Has there been any delay or font flicker (when it switches from a normal font to the TypeKit font) on your site loading up if you use a font on large body of copy? Going to be talking to our Dev guys here soon about this.

  • Pingback: reBlog from dtelepathy.com: Stop Using Lame Fonts | Matt Lackey()

  • Here is a great reference for font stacks: The Font Matrix http://media.24ways.org/2007/17/fontmatrix.html

  • Aren’t you using Arial? Wow.

  • Great art. I was reading this http://bonfx.com/19-top-fonts-in-19-top-combinations/ , right now I’m looking new ideas for my website, all the articles about typo is very useful, and twitter :P.

  • @Chapolito From the king of creative font use, thanks Jesse. I’ll be referencing that in the future.

    @Peter Dang, you caught us, I was wondering if anyone would take the time to write that. Yeah we are, but for me this is a recent goal which I set with the writing of the last paragraph in this article. Just wait for the redesign coming around the corner, this site is 3 or so years old. Just stay tuned and you will once again be “Wowed”

    @ADRYMCS Thanks for the link! Always enjoy looking at typeface combinations and all of them are classics. Taking those basics and applying them to not so well known, but quality designed typefaces is where it gets fun.

  • Pingback: Viral Notebook | Michael M. Grant, Ph.D.()

  • Pingback: Delete fonts to free up hard drive space | CW San Diego()