Text Styling

You've painted boxes and sized them. Now the words sitting inside them get a treatment of their own — a different typeface, a bigger size, some weight.

Choosing a typeface: font-family

font-family sets what a piece of text looks like. It takes a list, not a single name, because not every visitor's device has every font installed:

h2 { font-family: Georgia, serif; }

The browser tries Georgia first. If that font isn't available, it falls back to serif — not a specific font, but a category ("give me whatever serif font this device has"). That fallback is why the list almost always ends in a generic name like serif, sans-serif, or monospace: skip it, and a missing font falls back to the browser's own unpredictable default instead of something in the family you asked for.

Think of it like asking a friend for a restaurant recommendation: "that specific taco place — or if it's closed, anywhere else serving tacos." The list is a chain of fallbacks, most specific first, safest last.

Size and weight

font-size works exactly like the sizes from last lesson — usually px for a fixed, predictable result. font-weight controls boldness: the keywords normal and bold cover most cases.

h2 {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: bold;
}

Lining text up: text-align

text-align positions text inside whatever box it's sitting in — left (the default for this course's language), center, or right:

.byline { text-align: center; }

Notice text-align lives on the container, not the words themselves — you're telling a box how to arrange whatever text ends up inside it, the same way color and font-size did. A short caption or byline under a heading is the classic place to reach for center; a long paragraph almost always reads better left-aligned, since centered paragraphs make your eyes hunt for where each new line starts.

Common mistake

Leaving off the generic fallback at the end of font-family is the mistake that bites hardest, because nothing looks wrong on your own machine — you probably have the font you named. Someone visiting on a device without it just gets a silently different font, with no error to point at. Always end the list with serif, sans-serif, or monospace.

Words are dressed now. Next: giving the boxes around them room to breathe.

Exercise

Style a trail card's heading and byline

Style the heading and byline below:

- h2 — font-family: Georgia, serif;, font-size: 28px;, and font-weight: bold;. - .byline — text-align: center;.