Text and Fonts in CSS

Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore you must be careful in your font choices

Font Size Font size has a big impact on design and readability of Web pages There are several ways to specify font sizes with CSS The size of fonts can be controlled with the font-size property

Font Color, Weight and Style You can change your text color with the color property You can give fonts extra weight when needed using the font-weight property You can add decoration such as overlines, underlines and line-throughs

Font Families Each font family contains a set of fonts that share common characteristics There are five font families:  Sans-serif  Serif  Monospace  Cursive  Fantasy

Sans-Serif Family Verdana Arial Black Trebuchet MS Arial Tahoma

Serif Family Times New Roman Georgia Baskerville Bookman Old Style

Monospace Family Courier New Letter Gothic

Cursive Family Comic Sans Freestyle Script Bradley Hand

Fantasy Family Impact Copperplate gothic

Summary Serif fonts have an elegant, traditional look Sans serif fonts have a very clean, readable look Monospace fonts feel like they were typed on a typewriter Cursive and fantasy fonts have a playful or stylized feel

Specifying Font Families in CSS You can specify more than one font using the font-family property Type the font name, separated by commas  Body { font-family: Verdana, Geneva, Arial, sans-serif; }

How Font-Family Specifications Work Body { font-family: Verdana, Geneva, Arial, sans-serif; } The browser will first check to see if Verdana is available on the computer If Verdana is not available, the browser will look for Geneva. If Geneva is not available, the browser will look for Arial. Finally, if none of the specific fonts can be found, the browser will use whatever is considered the default sans-serif font.

Adjusting Font Sizes You can specify your font size in pixels  font=size: 14px; You can specify your font size in percentages  font-size: 150% You can specify your font size using “em” which is another relative unit of measure  font-size: 1.2em;