Heading and typography

Add heading and typography properties.

Typeface family: font-family

Readability starts with the typeface. The font-family property tells the browser which font to use. If you list several, the browser tries them in order and falls back to the next when one is missing.

For Travel Diary, let's pick a clean, readable stack:

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

Adding serif at the end means the browser falls back to its default serif font when none of the others are available.

Size and weight: font-size, font-weight

We set the text size with font-size and the thickness with font-weight. Pixels (px) are a common, clear unit for size; weight uses numbers like 400 (normal) and 700 (bold), or the keywords normal and bold.

For the blog body, 18 pixels at normal weight is a solid start:

font-size: 18px;
font-weight: 400;

Line spacing: line-height

In long blog posts, lines packed too tightly are hard to read. The line-height property controls the vertical space between lines. A unitless number is multiplied by the font size.

For example, line-height: 1.6 makes each line 1.6 times the font size tall. That gives comfortable spacing for long paragraphs.

Exercise Add the body rule

Take the file with the header comment from the previous lesson. Below it, add a body rule with four declarations: font-family: Georgia, "Times New Roman", serif, font-size: 18px, font-weight: 400, and line-height: 1.6. End each declaration with a semicolon.

Show example solution

/* Travel Diary stylesheet */

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

Test yourself

Which is a valid font-family value?
- Georgia, serif
- 18px
- #2b2b2b
- bold
Show answer

Georgia, serif — Correct. font-family is a list of font names ending with a family name (serif, sans-serif).
Complete the font-size value
```
font-size: ____;
```
Show answer
```
font-size: 18px;
```
Match each property to its purpose

font-family

typeface
font-size

text size
font-weight

text weight
line-height

line height

Next lesson: Content box

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies