Fonts

Choosing Fonts How text looks on our web pages is a major component of the overall appearance of our site. We need to choose our text fonts carefully, keeping in mind the following: Only those fonts that are installed on our viewers' computers will display properly on our web pages. For this reason, we are limited to a handful of so-called "web safe fonts", i.e. those fonts that are installed on nearly all computers. Whichever font we choose as primary, we should provide one or more "backup" fonts for the browser to use in case the main one is not available. Before we begin to set fonts and their backups, let's go over the list of web- safe fonts available to us and how each one looks.

Web Safe Fonts Fonts are divided into two major groups: serif and sans-serif. Here are the traditional fonts that we may use safely, since more than 99% of web visitors will have them installed on their computers: Sans-serif fonts: Arial Arial Black Century Gothic Comic Sans MS Lucida Sans Unicode Tahoma Trebuchet MS Verdana Serif fonts: Book Antiqua Courier New Georgia Palatino Linotype Times New Roman

What is a Serif? Look at the capital 'S' in the title above. It is written in Arial, a sans-serif font. s Serif fonts: Book Antiqua Courier New Georgia Palatino Linotype Times New Roman A serif is the extra flourish at the ends of letters. Serifs are intended to enhance readability, especially in physical print media, such as newspapers and magazines. A "sans-serif" font is one that does not contain serifs on its characters. These fonts are generally preferred for web pages, as they are slightly easier to read on a computer screen.

Setting Fonts and Fallbacks We are already familiar with the font-family property in CSS. Until now, we simply designated a single font: .example { font-family: Tahoma; } A better approach is to set our preferred font but also provide a second (fallback) font, and a third (final fallback) font, like this: .example { font-family: Tahoma, Arial, sans-serif; } This CSS declaration informs the web browser: "Display the text in Tahoma font. If Tahoma is not available, use Arial. If neither Tahoma nor Arial is available, use a generic sans-serif font. Additional fallback fonts may be listed, if desired. Two named fonts and the generic fallback should be considered the minimum.

CSS Font Syntax If the named font contains a space, we must enclose it in quotation marks: .example { font-family: "Palatino Linotype", "Book Antiqua", serif; } This is Palatino Linotype. This is Book Antiqua. We should choose similar fonts as fallbacks, so our page will appear quite close to our original intention, even if the primary font is unavailable. Always list either serif or sans-serif as the final entry in your list. It will be the "ultimate" fallback font, as all browsers have these generic fonts available to use.

Font Strategies When choosing fonts for your own web pages: Experiment using various fonts and sizes on your pages until you find those that match the "look and feel" for which you're aiming. Visit websites in which you find the text visually appealing. View the page source to see which fonts they are using. The Comic Sans MS font is fun and lighthearted but not appropriate for a professional website. It's OK to name a relatively exotic font in your font-family declaration, as long as you have a web safe fallback font that renders acceptably on the page. As a general web design rule, avoid using more than two different fonts on a single web page. For limited use of unusual fonts - such as in logos, headers, and navigation bars - many web designers create images containing the text and place those images on the page instead, avoiding the web safe font issue altogether.

Custom Web Fonts The CSS we are learning in this course is version 2.1. A newer version called CSS3 is under active development and one of its features is the font-face property. This property enables us to use any of hundreds of free fonts on the internet: The most recent versions of all major browsers now support CSS3 and its ability to load custom fonts directly from the web, no longer relying on fonts being installed on the local computer. For web designers, the era of being limited to web safe fonts is nearly over. Though it's important to know about custom web fonts, we will be sticking with the standard set of web safe fonts in this course.