Text

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;

Leave a Reply

Your email address will not be published. Required fields are marked *