Font size and weight

Learn font-size and font-weight properties.

Font weight

The thickness of a font is set by the font-weight property. The two most common values are normal (400) and bold (700). For lighter weights you can write 100–300, for heavier ones 500–900.

For example, font-weight: bold; and font-weight: 700; give the same result. Use bold to emphasise a heading, or a lighter value to soften a footnote.

Exercise Style the heading

Open a declaration block for the h1 selector. Add the declarations font-size: 32px; and font-weight: bold; inside it.

Show example solution

h1 {
  font-size: 32px;
  font-weight: bold;
}

Test yourself

Scale relative to the parent

li {
  font-size: ____;
}

Show answer

li {
  font-size: 1.2em;
}

Which font-weight value produces bold text?
- 100
- 300
- 700
- 0
Show answer

700 — Correct. 700 equals bold; normal is 400.
Match each unit to its meaning

px

Fixed pixel size
em

Ratio to the parent
%

Percentage of container
rem

Ratio to the root

Make the heading bold

h1 {
  font-weight: ____;
}

Show answer

h1 {
  font-weight: bold;
}

Next lesson: Line height and spacing

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies