Font size and weight
Learn font-size and font-weight properties.
Font size
The size of text is set by the font-size property. Two common units exist: pixels (px) give a fixed size; em gives a ratio relative to the parent element's size.
For example, font-size: 16px; renders 16 pixels on any device. font-size: 1.5em; means 1.5 times the parent's size; if the parent is 16px, the result is 24px.
The em unit, which scales with the parent, is handy in nested lists.
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; }