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