Week 12 CSS Font - family

1. WEEK 12
CSS FONTS:
FAMILY

2. FONTS
In CSS, there are two types of font family names:
Generic family
• a group of font families with a similar look (like "Serif" or
"Monospace")
Font family
• a specific font family (like "Times New Roman" or "Arial")

3. FONTS
Generic Family Font Family Description
Serif Times New Roman
Georgia
Serif fonts have small lines at
the ends on some characters
Sans-serif Arial
Verdana
"Sans" means without - these
fonts do not have the lines at
the ends of characters

4. FONTS
• Examples of serif fonts include Times New Roman, Georgia,
and Book Antiqua:
• Sans-serif fonts include Arial, Tahoma, Trebuchet MS, and
Verdana:

5. FONT FOR THE WEB
In terms of font accessibility, keep these principles in mind:
1. Use real text rather than text within graphics
2. Select basic, simple, easily-readable fonts
3. Use a limited number of fonts
4. Ensure sufficient contrast between the text and the background
5. Avoid small font sizes
6. Use relative units for font size
7. Limit the use of font variations such as bold, italics, and ALL CAPITAL
LETTERS
8. Don't rely only on the appearance of the font (color, shape, font
variation, placement, etc.) to convey meaning, for examples links
9. Avoid blinking or moving text

6. FONT FOR THE WEB
On computer screens, sans-serif fonts are considered easier
to read than serif fonts
How to specify fonts for your text:
• Start with the font you want, and end with a generic family, to let
the browser pick a similar font in the generic family, if no other
fonts are available.
• If the browser does not support the first font, it tries the next font
body
{
font-family: Helvetica, Arial, sans-serif;
}

7. WHAT FONTS CAN I CHOOSE?
There are thousands of fonts that could potentially be used
on a web site…
• However, a font can only be displayed on if it is loaded on a computer
• Many fonts are natively available in modern operating systems, these
are “safe” to use and include:
• Arial
• Georgia
• Courier New
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• It is generally best to use standard fonts that are available on the end
users device.

8. WHAT’S THE BEST FONT
TO CHOOSE?
• Verdana, Tahoma, Trebuchet MS,
and Georgia, were developed
specifically for use in electronic media
For example:
• Verdana is one of the most popular
fonts designed for on-screen viewing
• Verdana has a simple, straightforward
design
Compared to Arial, another common
web font:
• The characters are not easily confused
• Verdana has more spacing between
letters and is larger

9. WHAT FONTS CAN I CHOOSE?
body
{
font-family: Helvetica, Arial, sans-serif;
}
• In this case, if the computer didn’t have Helvetica it would
choose Arial, if it didn’t have Arial then it would choose a
general serif font that it did have, eg. Verdana

10. TRY IT OUT!
Check the link in Week 12 to W3C schools
and try the following serif and san-serif fonts: