Skip to main content

CSS Typography and Text

Text styling is one of the most important aspects of web design. It affects readability, user experience, and the overall feel of a site.

1. Font Family​

The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next one.

p {
  font-family: "Times New Roman", Times, serif;
}

Generic Font Families:​

  • Serif: Fonts have small lines at the ends of characters (e.g. Times New Roman).
  • Sans-serif: Clean lines (no small lines) (e.g. Arial).
  • Monospace: All characters have the same width (e.g. Courier New).

2. Text Alignment​

The text-align property is used to set the horizontal alignment of a text.

  • text-align: left; (default)
  • text-align: right;
  • text-align: center;
  • text-align: justify; (stretches lines to be equal width)

3. Text Decoration​

The text-decoration property is used to add or remove decorations from text.

a {
  text-decoration: none; /* Removes underline from links */
}

h1 {
  text-decoration: underline;
}

4. Text Transformation​

The text-transform property is used to specify uppercase and lowercase letters in a text.

  • text-transform: uppercase;
  • text-transform: lowercase;
  • text-transform: capitalize; (first letter of each word)