What are Font Stacks?

When designing a website, picking a font to use for your pages text isn't as easy as picking any font you think looks nice and is legible on the web. Why you ask?  Let's say you picked Corbel for your site in font size 10, sure it might look great on your computer but Jane Doe across town may not have Corbel on her computer so when she sees your website, her computer selects a default font for her to display your websites text and suddenly the site isn't as legible and she can't read your sites text so she goes elsewhere.

The proper way to choose a web font is to choose a 'stack' (a bit like a list).  Font stacks combine Windows, Mac, Linux and Adobe fonts in groups that are relatively similar among themselves (stacks take the following format; exact font, nearest alternative, platform-wide alternative(s), universal (cross-platform) choice(s), generic).  A font stack allows you to control what the end user sees no matter what machine/computer they are using to view your website. For instance, a Mac user won't see the same font as a Windows user because their computers don't have the exact same system fonts.  It is standard practice to use a font stack because if you don't, the end user such as Jane who doesn't have the same font as you, will see whatever their machines default 'serif' or 'sans-serif' font is, which could make the site look less than optimal or at worst, illegible.  I choose from the 8 Definitive Font Stacks when designing websites, these font stacks have been professionally created from typography experts based on the best pairing of fonts for the stacks and web read-ability, these stacks are used the world over by professional web designers.  A stack example would be the 'Verdana-based sans serif stack', my personal favorite for it's legibility and cleanliness.  The stack is; Corbel, Lucida Granda, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Bitstream Vera Sans, Liberation Sans, Verdana, Verdana Ref, sans-serif.

Another option that allows you to use custom fonts thanks to CSS (cascading style sheets) is to use software such as TypeKit. TypeKit allows you to choose from hundreds of fonts (requires sign up and a low annual fee) and once you pick a font(s) for your site, you simply add a line of generated code to your web pages.  Taking this approach eliminates the issue of the user not having the font you selected on their machine because it is pulled straight from TypeKit, thus ensuring what font you select for your site is going to be exactly what users see.  I highly recommend using TypeKit.

If you'd like to discuss your website and incorporating TypeKit or Font Stacks, please contact us.