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.
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.
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.
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.
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.
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
- CSS Font Stack Webapp Library
- Build Better CSS Font Stacks
- Guide to CSS Font Stacks: Techniques and Resources
- Web Font Matrix
- Revised Font Stack Guide for the Web
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.
