The CSS `font-size` property sets the size of text. Use it to make a heading prominent, distinguish a name from a job title, or give form labels less visual weight than the values people enter. section 6.7.1 section 10.5
You can set a size directly, as in `font-size: 27px` for credit-card numbers. Relative units are useful when text should scale with another size. `em` uses the parent element’s font size; `rem` uses the root (`html`) element’s font size. With the usual 16px browser default, `2rem` produces 32px. Relative sizes help text adapt to user settings and devices. section 9.4.3 section 6.7.1 section 4.1.1
Size a profile card
Give the name `font-size: 2rem` and the job title `font-size: 1.25rem`. The name stands out while the title remains easy to read. Adjusting their weight and color strengthens that distinction. section 6.7.1
Font size works alongside `font-family` and `line-height`. A display font’s glyphs may look smaller than another font’s at the same setting, so a drop cap can need `font-size: 6em`. Its larger size also makes its default line height tall; reducing `line-height` helps nearby text flow around the floated letter. Keep decorative fonts to short passages when readability matters. section 7.1.3
The `font` shorthand can set size with other typography choices: `font: 900 120px "Rubik", sans-serif` sets weight, size, and font family in one declaration. Check browser defaults, too: a form’s Send button may start with smaller text than the surrounding content, so `font-size: 1rem` brings it up to the intended size. section 5.3.1 section 10.7
Listing 6.11 Styling the name
h1 { #1
font-size: 2rem; #1
margin: 36px 0 0; #1
color: var(--primary); #1
} #1
.title { #2
font-size: 1.25rem; #2
font-weight: bold; #2
color: var(--secondary); #2
} #2
Compare the `rem` sizes used for the profile name and job title. section 6.7.1
