Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you're dealing with web typography, there are certain restrictions that you have to abide by. In this movie we'll be exploring the web-safe fonts and some ways that you can get around those restrictions to add more rich typography to your layouts. The problem that we face as designers is that many computers, operating systems, and mobile platforms ship with different browsers and different font sets by default. This means that not everyone has every font installed on their computer, and thus our choices become rather limited when creating our web design projects.
Web-safe fonts by definition are fonts that are generally installed on most computers and operating systems, and are considered to be "safe" for use in our designs. We have three basic categories of web-safe fonts; they are serif, sans serif, and monospaced. The serif family includes the Georgia typeface, Palatino Linotype, and Times New Roman, while sans serif contains Arial, Helvetica, Lucida Grande, Verdana. And the monospace family contains Courier New and Lucida Console.
Now, there are some other fonts that fit into these families that might be on other computers. These are just the basic ones that I've outlined here that are generally installed on most computers. All of these fonts can be used in your design without much problems, and they should translate just fine when they're converted over to HTML and CSS later on. If you're dead set on using some wild-and- crazy font in your design, you might consider taking a look at a service like Google Web Fonts or Adobe's Typekit. Typekit was purchased by Adobe in 2011, and it's one of the most popular web font services out there today.
Typekit allows you to use their entire library fonts on your web site by injecting small bits of code that they provide you. Many of the fonts that ship with the Creative Suite are available as Typekit web fonts, which makes it really handy. Google Web Fonts is a nice free alternative to Typekit, and it's continually growing in popularity and inventory as well. Much like Typekit, Google Web Fonts allows you to use alternative font families on your site by injecting small bits of code into your web designs. One of my favorite things about Google Web Fonts, though, is the fact that you can download the fonts that they show you here to your computer and use them in Photoshop or Illustrator or whatever program you might be doing your designs in.
That makes it my top choice in this arena. If you'd like more information about Typekit or Google Web Fonts, be sure to check out James Williamson's courses on lynda.com entitled Up and Running with Typekit and Web Fonts First Look. Hopefully by now you have a better understanding of what fonts are "safe" to use on the web, and also how you can get around those restrictions should the need arise.
Get unlimited access to all courses for just $25/month.Become a member
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.