The CSS font-size property tells a browser how large to draw an element’s text. Think of it as choosing type size for each part of a page: headings, body copy, captions, sidebars, and navigation can each have their own size. section 4.9 section 4.32
Write font-size as a property-value declaration inside a CSS rule. A selector chooses the elements; the declaration supplies the size. For example, this makes every h1 heading 36 pixels tall. section 1.17 section 1.19
Set a heading size
h1 { font-size: 36px; } Because the rule targets h1, every h1 on the page gets the same size. Change 36px once and all of those headings update together. section 1.19
Pixels are a direct way to begin, but relative sizes help text respect visitor preferences:
- Use px when assigning a fixed pixel value, such as font-size: 24px; for text in a div. section 4.9
- Use em when the size should follow the browser’s or visitor’s default font size: 1.5em is 24px when the default is 16px, but 36px when it is 24px. section 14.7
- Watch inherited sizes: a child’s em value is calculated from its parent’s font size, so nested relative values can compound. section 14.7
Browsers provide default sizes, especially for headings from h1 (largest) through h6 (smallest). Setting your own sizes gives the page a deliberate look, while relative units avoid overriding people who increase their default text size for easier reading. section 4.9 section 14.7
body {
font-size: 1em;
}
header {
font-size: 1.5em;
}
h1 {
font-size: 2em;
}
Inspect the nested rules to trace how inherited em sizes build from body to header to h1. section 14.7
