Challenge - Typography
Style an article page by combining typography properties.
Recall typography properties
On an article page typography sets readability. font-family picks the typeface, font-size the size, font-weight the thickness, and line-height the row height. text-align aligns the text, and color sets its tone.
A heading is large and dense; body text reads best with a loose line height. Using these together on an h1 and a p inside an <article> gives a tidy, readable page.
Exercise Style the article heading and body
Add an article h1 selector. Set color to #1a1a2e, font-size to 2.25rem, and line-height to 1.2. Then add an article p selector: font-size is 1.05rem, line-height is 1.7.
Show example solution
/* article heading and body */
article h1 {
color: #1a1a2e;
font-size: 2.25rem;
line-height: 1.2;
}
article p {
font-size: 1.05rem;
line-height: 1.7;
}Exercise Style the pull-quote box
Add a .pullquote class selector. Set font-style to italic, font-size to 1.25rem, and color to #6a4c93. Set border-left to 4px solid #6a4c93 and padding-left to 1rem.
Show example solution
/* pull-quote box */
.pullquote {
font-style: italic;
font-size: 1.25rem;
color: #6a4c93;
border-left: 4px solid #6a4c93;
padding-left: 1rem;
}Test yourself
-
Complete the font-size for the article heading
article h1 { font-family: "Merriweather", serif; font-size: ____; font-weight: 700; line-height: 1.2; }Show answer
article h1 { font-family: "Merriweather", serif; font-size: 2.25rem; font-weight: 700; line-height: 1.2; } -
Why prefer line-height: 1.7 for long paragraphs?
article p { line-height: 1.7; }- It turns the font into a serif
- It makes the text bold
- Rows get more space, so the eye follows lines easily
- It aligns the paragraph to the right
Show answer
Rows get more space, so the eye follows lines easily — Correct. line-height controls the vertical space between rows; 1.7 improves readability.
-
Match each typography property to its purpose
- font-family
- Picks the typeface family
- font-weight
- Sets the weight thickness
- line-height
- Vertical space between rows
- text-align
- Horizontal alignment