Fonts and Text

Typography makes an enormous difference. The same content in a good font at the right size reads completely differently from default browser text. CSS gives you full control over it.

`font-size`

Sets how big the text is. The most common unit is px (pixels):

h1 {
  font-size: 48px;
}

h2 {
  font-size: 28px;
}

p {
  font-size: 16px;
}

`font-family`

Sets the typeface. You list several options — the browser uses the first one it has installed, and falls back to the next if it does not:

body {
  font-family: Arial, Helvetica, sans-serif;
}

The last value (sans-serif) is a generic fallback — the browser picks any sans-serif font it has if none of the named ones are available.

Common safe choices: - Arial, Helvetica, sans-serif - Georgia, serif - "Courier New", monospace

`font-weight`

Controls how thick the text is:

h2 {
  font-weight: bold;
}

p {
  font-weight: normal;
}

.light-text {
  font-weight: 300;
}

You can use words (bold, normal) or numbers. 400 is normal, 700 is bold, 300 is light.

`text-align`

Aligns text horizontally inside its element:

h1 {
  text-align: center;
}

p {
  text-align: left;
}

.caption {
  text-align: right;
}

Putting it together

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
}

h1 {
  font-size: 42px;
  font-weight: bold;
  text-align: center;
}

h2 {
  font-size: 24px;
  font-weight: bold;
}

Those six rules alone make a page look significantly more polished than browser defaults.

Challenge

Add typography rules to your style.css for portfolio.html:

Set a font-family on body
Centre your h1
Make h2 a noticeably different size from your p text
Try font-weight: 300 on a paragraph — compare how it feels versus normal weight

The goal is a page where the text hierarchy is clear — the user's eye should naturally go from h1 to h2 to p in that order.

← Colors and Backgrounds Next: Spacing →