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-serifSerifMonospaceCursiveFantasy

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 ScriptBradley 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 commasBody { 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;