Summary - Article typography

Combine typography properties to style an article.

All typography together

In this lesson you will combine the typography properties you have learned so far on an article page: font-family for the font, font-size and font-weight for size and thickness, line-height for line spacing, text-align for alignment, text-decoration and text-shadow for effects.

In two code tasks you will first style the article's heading, then its paragraph. Each declaration sharpens one side of the article.

Exercise Style the article heading

Open a block for the h1 selector. Add these four declarations inside: font-family: "Segoe UI", Arial, sans-serif;, font-size: 36px;, font-weight: bold; and text-shadow: 2px 2px 4px rgba(0,0,0,0.3);.

Show example solution

h1 {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 36px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

Exercise Style the article paragraph

Open a block for the p selector. Add these four declarations inside: font-family: "Georgia", "Times New Roman", serif;, font-size: 18px;, line-height: 1.6; and text-align: justify;.

Show example solution

p {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.6;
  text-align: justify;
}

Test yourself

Match each property to its job

font-family

Font family
line-height

Gap between lines
text-align

Horizontal alignment
text-shadow

Text shadow
Which value justifies a paragraph to both edges?
- text-align: center;
- text-align: justify;
- text-align: both;
- text-align: sides;
Show answer

text-align: justify; — Correct. text-align: justify; spreads lines to both edges.

Set the paragraph font

article {
  font-family: "Georgia", ____;
}

Show answer

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

Next lesson: What is the box model?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies