Fonts and text styling

What you will learn

• font-family with fallbacks, font-size, font-weight
• text-align, text-transform, text-decoration
• line-height and letter-spacing for readability

Understand the idea

font-family lists fonts in order of preference: font-family: Georgia, "Times New Roman", serif;. If the first is missing on the visitor's computer the browser tries the next, and the last should be a generic family (serif, sans-serif, monospace). Put names with spaces in quotes.

font-size can be set in px (fixed), em (relative to the parent) or rem (relative to the page's base size, which is 16px by default). Rem is a good habit because the text can grow if a visitor increases their browser's text size. font-weight is normal, bold or a number from 100 to 900.

text-align sets left, center, right or justify. text-transform changes case (uppercase, lowercase, capitalize). text-decoration adds or removes underlines, so text-decoration: none removes the line from a link. For long paragraphs, line-height: 1.5 (one and a half times the text size) and a little letter-spacing make reading far easier.

Example

h1 {
  font-family: Georgia, serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

p {
  line-height: 1.6;
  text-align: justify;
}

a {
  text-decoration: none;
  font-weight: bold;
}

Your turn: code to type and practise

Style h1 with a font-family, a font-size, text-align: center and text-transform: uppercase. Style p with a line-height and letter-spacing, and remove the underline from a with text-decoration: none.

← Backgrounds and gradientsCombinators, pseudo-classes and pseudo-elements →