Transcript File - STM Web Design

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 websafe 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:
Serif fonts:
Arial
Book Antiqua
Arial Black
Courier New
Century Gothic
Georgia
Comic Sans MS
Palatino Linotype
Lucida Sans Unicode
Times New Roman
Tahoma
Trebuchet MS
Verdana
What is a Serif?
Look at the capital 'S' in the title above. It is written in Arial, a sans-serif
font.
Serif fonts:
Book Antiqua
s
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.