# CSS and Text

As the original purpose of the World-Wide-Web was to disseminate written information, it should be no surprise that CSS would provide many properties for working with text. Some of the most commonly employed properties are:

• font-family defines the font to use for the text. Its value is one or more font family or generic font names, i.e. font-family: Tahoma, serif, font-family: cursive or font-family: "Comic Sans". Font family names are typically capitalized and, if they contain spaces or special characters, double-quoted.
• font-size determines the size of the font. It can be a measurement or a defined value like x-small.
• font-style determines if the font should use its normal (default), italic, or oblique face.
• font-weight determines the weight (boldness) of the font. It can be normal or bold as well as lighter or darker than its parent, or specified as a numeric value between 1 and 1000. Be aware that many fonts have a limited number of weights.
• line-height sets the height of the line box (the distance between lines of text). It can be normal, or a numeric or percent value.
• text-align determines how text is aligned. Possible values are left (default), center, right, justify, along with some newer experimental values.
• text-indent indents the text by the specified value.
• text-justify is used in conjunction with text-align: justify and specifies how space should be distributed. A value of inter-word distributes space between words (appropriate for English, Spanish, Arabic, etc), and inter-character between characters (appropriate for Japanese, Chinese, etc).
• text-transform can be used to capitalize or lowercase text. Values include capitalize, uppercase, and lowercase.

## Choosing Fonts

An important consideration when working with HTML text is that not all users will have the same fonts you have - and if the font is not on their system, the browser will fall back to a different option. Specifying a generic font name after a Font Family can help steer that fallback choice; for example:

body {
font-family: Lucinda, cursive
}


will use Lucinda if available, or another cursive font if not. Some guidelines on font choice:

• cursive fonts should typically only be used for headings, not body text.
• serif fonts (those with the additional feet at the base of letters) are easier to read printed on paper, but more difficult on-screen.
• sans-serif fonts are easier to read on-screen; your body text should most likely be a sans-serif.

### Web-Safe Fonts

Fonts that commonly appear across computing platforms and have a strong possibility of being on a users' machine have come to be known as web-safe. Some of these are:

• Arial
• Helvetica
• Times
• Courier New
• Courier
• Georgia
• Lucidia Console
• Palatino
• Verdana

### Font-Face at Rule

Alternatively, if you wish to use a less-common font, you can provide it to the browser using the @font-face rule. This defines a font and provides a source for the font file:

@font-face {
font-family: examplefont;
src: url('examplefont.ttf');
}


You can then serve the font file from your webserver.