Join 18,800+ Readers

Cleaner CSS3 Font Stacks for Web Developers

by Jake Rocheleau

on October 28, 2012

in CSS Fonts Resources

Learn how to earn $125 or more per hour as a freelancer - Click Here
Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN for 20% off

The CSS font-family property is nothing new and has been around for generations. Yet web designers don’t often think just how important the proper fonts can affect your overall website layout. Web-safe fonts have been the typical solution and only recently have we been offered some alternatives.

Mac OS X Font Book App website typography - featured image

This method comes from restrictions based on common operating systems. Mac OS X and Windows machines only have so many pre-installed fonts to choose from. But with CSS3 effects it’s possible to generate creative font stacks with multiple fallback options. In this article I’d like to examine a few trends for creating more appropriate CSS font stacks. Much of this information is common knowledge for advanced developers but it’s worth revisiting as more people are just getting interested in CSS3 design techniques.

What is a Stack?

The basic idea is that each font stack will hold a collection of fonts in sequential order. The web browser will cycle through these fonts from beginning to end and display the first one which is available to the user. This could be the first font which is installed on their computer, or possibly a font which you’ve included using CSS3 @font-face.

When building stacks you want to consider the context where this font will be displayed. Are you creating paragraphs, navigation links, or maybe page headers? How big or small do you need the text to appear? Are you using any other effects such as text shadows or backgrounds? There is no “right answer” but some fonts just look better than others in particular situations.

Typography stack of black white newspapers

If you can understand this basic principle then pushing newer designs will just require practice. When using code IDEs such as Dreamweaver you aren’t given very many options. Even other software solutions like Coda are not built with tons of customizable font stacks.

Build a Default Fonts Listing

I would recommend for newer designers to create a simple template file which holds a series of font stacks to choose from. As you get more familiar with web development you will recognize which pages should use serif vs sans-serif. You’ll learn when to bold, when to italicize, and when you may want to increase/decrease letter spacing.

whiteboard css code marker font styles design

Remember that font choices are only one piece to the whole picture. How you color and style the fonts will also affect their ability to blend naturally into any webpage layout. But these styles are related to CSS properties which you’ll learn the more you practice web development.

I want to offer some default font stacks which you can choose from right off the bat. I got many of these ideas from a great CSS font stacks article written by Nathan Ford in 2008. His ideas are still just as relevant now as they were back then and present a solution to the mundane normality of web fonts.

  • Cambria, Georgia, Times, “Times New Roman”, serif;
  • “Copperplate Light”, “Copperplate Gothic Light”, “Baskerville Old Face”, Baskerville, serif;
  • Geneva, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif;
  • “Gill Sans”, “Trebuchet MS”, “Helvetica Neue”, Calibri, Arial, sans-serif;
  • Candara, Calibri, Segoe, “Segoe UI”, Optima, Arial, sans-serif;

Creating @font-face Rules

Now aside from the typical fonts installed on most operating systems we also have the option of including custom font styles. If you have the time and patience to setup your own @font-face rules then I highly recommend this method.

You’ll have complete flexibility to include any font you wish. Just host the files on your website and follow the syntax for references to these files on your server. Note that support for different font families requires various file extension depending on the browser model. To support everything you should include EOT, WOFF, SVG, and TTF/OTF.

The WOFF format is newer which is mostly supported by modern browsers and mobile smartphone browsers. Also it’s very difficult for people to download and steal WOFF fonts compared to OTF, TTF, etc. But if you really want support you should include a copy of each typeface since the files are not very large to begin with.

Fonts 2 Web converter webapp typography css3 media

If you have some .ttf or .otf files you can quickly convert these using Font2Web. This is a handy application where you can upload a copy of any font and it’ll give you all the formats needed to support @font-face within modern browsers. It’s the one tool I have to recommend for web developers just getting interested in custom web fonts.

External Font Resources

Since we live in such dynamic times it can be presumed that somebody has already created font resources for web developers. And actually there are a few – my personal favorite is Typekit which charges for premium accounts but you can try it out for free.

Adobe Typekit CSS3 font family typography for the web

Typekit was created by Adobe which includes a huge library of their fonts online. All you need to do is add your domain name and then pick whichever fonts you want to include on the website. Typekit will output some JS which you copy into your document and presto! Now you can give your font-family stacks some unique titles.

The only problem when working with an 3rd party server is the load times. You may notice it takes an extra couple seconds for typical webpages to load. If this is the case consider trimming down your font choices to reduce bandwidth on each call. Or if you have access to open source fonts host these files on your own server instead.

Using Google Web Fonts

The Google Web Fonts service is 100% free for everybody and has been running online for a little while now. I often use their service within tutorials or small webapps just to spruce up the design. All the font files are hosted and managed by Google on their servers – and the library is constantly growing.

You actually don’t even need to signup before using the webapp. Just access the site and pick out your fonts. Then Google will give you an external CSS document to include which looks something like this:

<link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>

Then you can setup fonts in your own CSS using something like font-family: “Marcellus SC”, serif. And of course you should customize your own stack with some fallback options before the default serif/sans-serif. But just having the ability to work with custom Google fonts on a remote server is amazing. And I feel this technology illustrates just how far we have come since the early days of web development.

Related Links

Final Thoughts

It’s my hope that some developers can use these font stacks in future project works. The Internet is built on content and much of that content is ruled by text. Videos and images are alternative forms of media but contextual webpages will always be in demand. As such we need to advance with the times by utilizing updated display formats.

Be sure to check out a few of the linked resources above to learn more about this topic. Font stacks aren’t a huge inclusive study but there are inherent best practices and syntax rules to follow. If you like the article and want to share any further ideas feel free to let us know in the post discussion area.

Powered by Shutterstock

About Jake Rocheleau

Jake is a frontend user experience designer and frequent blogger. He writes about all things web and mobile design. Check out his updates on Twitter @jakerocheleau. Connect with Jake on google+