Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.
Figuring out how to define fonts for CSS was trickier than you might think. Very early on the problem with defining font families for a CSS had to do with not knowing what fonts the client might have installed. If the client didn't have the font installed on their systems the viewer would see the browser's default font, not the one defined by the author. Not only could this ruin the intent of the design and damage branding, it could cause serious problems, such as shifting line breaks and failed layouts. Because of this, the early authors of CSS understood the importance of allowing the font-family property to have more than one value.
Passing multiple values into font-family allows the designer to specify fallback fonts that the client should use in case the desired font isn't installed. This list of fonts is referred to as the font stack. Now when reading the CSS the browser is going to parse the fonts from the font stack in the order that they're listed. It's going to attempt to load the first font and if it fails, it will move onto the next one and to the next one after that until it parses through the entire list. If no installed font is found in the stack, the browser is going to again fallback to its default font.
Because of this, designers use a consistent strategy when building font stacks. Now first, the designer lists the exact font they want for a specific rule. In this case, you'll see that we're specifying Arial as the desired font. After that, the designer is going to list several fonts that are acceptable substitutes for Arial. Here you want to make sure that the fonts are similar in appearance and weight and size so the design is not negatively impacted. So here we have Helvetica and Helvetica Neue. They've both been added to the stack as fallbacks.
Helvetica Neue is more likely to be found on Macs, whereas Helvetica is more widely installed on PCs. So you'll notice here we're providing an option for both browsers. Now you'll note also that we have added quotation marks around Helvetica Neue. If a font has more than one word in its name, you need to put quotation marks around it to indicate that is a single value. So you just want to mark that as a literal string. Now at the end of the stack you'll notice that we have this final value of sans-serif. To avoid allowing the browser to override your stylistic choice, in this case we want a sans-serif font, you can specify one of five generic font families as the very last value in your stack.
These are serif, sans-serif, monospace, cursive, and fantasy, and let's take a look at some of those. Now, as you can see, the fonts used for these definitions change based on the browser and the platform in which they're being viewed. This means that although you aren't guaranteed which font is going to be used, you'll at least ensure that your font choice stays within the same font type. Although there are some wide variations as you'll see in the cursive area and the fantasy area. You really never know what you're going to get with those guys. Let's go back to our original font stack for a moment.
Now, since Arial and Helvetica are so similar they are the obvious choices to be included in the same stack. As you can imagine, if you want to build effective font stacks you need a good bit of knowledge about the fonts that you're going to use and how they relate to each other. If you're not too experienced with building font stacks, don't worry. There is a couple of really great resources online to get you started. The Code Style's CSS Font Sampler and Survey page is a great resource. You'll notice for example that we can go down and look at the Web Font Survey and Sampler area and we can get font survey results for both Windows, Mac, and Linux platforms.
So if I click on one of the survey links, you'll notice that we get a list of default fonts and how many machines they can be found on. So this is a really good way of choosing whether a font that's going to go in your font stack is installed on that platform or not. Now we also have a link to the Build better font stacks and the Font stack builder page and these are both great resources. The Build better font stacks is a page that gives you some advice and guidance on building your font stacks, tells you about fonts that are installed on machines, and then supplies you with a couple of starter font stacks that can get you going and target specific machines.
The Font stack builder is another great resource. If you want to see how common your font stack is or how successful it might be, you can simply add your own font stack and I'll just add the one we were using here on our slides. When I do that, I'll get reporting about what percentage of those types of machines will have those fonts installed. 99.7%, 97%, I'm going to be fairly successful with those, and I am getting the other 2% with Helvetica. So the Font stack builder is a great tool for trying out your own font stacks. I also want to mention three very good articles on taking your font stacks a little bit further than most people do.
Nathan Ford's build better font stacks article, which can be found at unitinteractive.com's blog, and Richard Rutter's Increase Your Font Stacks With Font Matrix, which can be found at 24ways.org. Both of those articles encourage designers to think about using fonts other than the tried and true default fonts that have been used for years. Both articles discuss how certain fonts have become common and are often ignored by designers when creating their stacks. Now Richard Rutter's article also links to his Font Matrix and this is really cool.
This lists all the fonts that are not only installed on systems by default, and that's what a lot of people focus on. You know, what comes with a PC that you buy or what comes with a Mac that you might buy? But this one also focuses on which fonts are installed with popular programs and suites, such as how many people have Adobe's Creative Suite installed and what fonts come with that. That's going to allow you to decide whether or not your target audience might have that font that you want installed and you could be a little bit more adventurous with your font stacks. Nathan Ford offers up some sample font stacks designed to target specific font sizes and situations.
Now both of these articles are great reads and I highly recommend them. We'll dive a little deeper in to creating font stacks and how they're used with web fonts a little bit later. For now, keep in mind that properly planning and executing font stacks can make the difference between a stunning design or an unintended mess.
Find answers to the most frequently asked questions about Web Fonts First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.