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

Next lesson: Challenge - Box model

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies