Join Justin Putney for an in-depth discussion in this video Planning for typefaces, part of Responsive Design Workflows.
Typography has always been among the designer's most important tools. In the past, Web designers have been restricted to a tiny set of Web safe fonts. This has been a long-standing frustration in designing for the Web. Flash files and PDFs have always had the ability to embed fonts, as well as subsets of fonts, making them preferred formats for designers who need more control over their type. Modern Web browsers have now adopted the @font-face CSS rule, which allows you to embed a font file in your Web page.
Even with the font-face rule, HTML doesn't offer fancy micro control over line breaks, ligatures, and kerning, but this is still a major step that the Web is taking in the designer's general direction. The designer will still have to try and balance control with responsiveness. Before you pause this course, and switch over to your HTML Editor to start embedding fonts, I must warn you of a couple catches. The first one is licensing. Those fonts you have on your computer were not licensed to be on the Web.
Because it's easy to open your HTML source code; it makes it possible for others to download fonts from your page, so you'll need to know about the restrictions placed on typefaces that you're using, so you're not in violation of any licensing agreements. A good place to learn more about this topic is the Adobe Web Font Licensing FAQ. The second catch is that not every browser supports the same formats, and the formats that are supported may not be the ones that you're using in your design applications. So even if your font is properly licensed, it's not as simple as copying the font from your computer, and embedding in your Web page.
Thankfully, there are a couple of services available that will help you with both licensing, and multiple formats. Font Squirrel is an online tool that allows you to upload font files from your Desktop, which it then converts into all of the required formats that you need, and provides you with CSS, and sample HTML. This is super handy, but you'll still have to monitor the licenses yourself. Typekit is a subscription-based service that allows you to embed fonts in your pages in such a way that it's very difficult for someone else to download the font files.
Typekit essentially takes care of the formatting and the licensing for you. You can choose from any of the fonts in Typekit's library, which includes many of the professional fonts that designers are accustomed to. Google fonts is very similar to Typekit, except that it's a service that only offers free fonts, so there's no subscription charge. The downside is that you may not be able to find the font that you're used to, but you should be able to find a nice looking alternative. If you're not in charge of implementing the fonts on the final experience, be sure to talk with your developer about the fonts you'd like to include, and be sure to provide them with any of the font files you might need.
And don't forget to carefully choose the fallback fonts that are used in your page for browsers that do not support the @font-face rule, as they may have an impact on your site's overall appearance. Now that you are aware of these new capabilities, you can put them to work in your designs.
- What is responsive design?
- Understanding concepts like scaling and interaction mediums
- Building a team and explaining job roles
- Planning for color and typefaces
- What developers and designers should provide
- Setting client expectations
- Working with a budget
- Investigating design solutions
- Hiring team members and contractors