The properties that allow you to control the appearance of text can be split into two groups:
- Those that directly affect the font and its appearance (including the typeface, whether it’s regular, bold, or italic, and the size of the text)
- Those that would have the same effect on text no matter what font you were using (including the color of text and the spacing between words and letters)
The formatting of your text can have a significant effect on how readable your pages are.
Types of Fonts You Can Specify
When choosing a typeface, it is important to understand that a browser will usually only display it if it’s installed on that computer.
- Serif: Georgia, Times, Times New Roman
- Sans-serif: Arial, Verdana, Helvetica
- Monospace: Courier, Courier New
- Cursive: Comic Sans MS, Monotype Corsiva
- Fantasy: Impact
As a result, sites often use a small set of typefaces that are installed in most computers. There are techniques to get around this, which we will cover later in the semester.
It is possible to specify more than one typeface and create an order of preference in case the user does not have your first choice of typeface. this is sometimes referred to as a font stack. Browsers are supposed to support at least one typeface from the categories above. For this reason, it is common to add the generic font name after your preferred choice of typefaces.
For example, if you wanted serif type, you could write the following:
font-family: Georgia, Times, serif;
Specifying Typefaces
font-family: Arial, Verdana, sans-serif;
Specifying Type Size
font-size: 24px;
Bold
font-weight: bold;
Italic
font-style: italic;
Uppercase & Lowercase
text-transform: uppercase;
Underline & Strike
text-decoration: underline;
Leading
line-height: 36px;
Letter & Word-Spacing
letter-spacing: 0.2em; word-spacing: 1em;
Alignment
text-align: left;
