CSS font properties for buttons
Open the practice file and compare the links with the <button>. Even with matching colors, the button text is smaller and may be in a different typeface. Browsers give form controls their own font settings rather than letting them inherit from the page; in desktop Chrome and Firefox that is a system font at a little over 13px. The links, by contrast, inherit whatever the paragraph uses, which in an unstyled page is the browser's default font (usually a serif such as Times) at 16px. This lesson sets the font on .btn directly, so every element with the class looks the same no matter where it started.
The four declarations
Add this group under the colors from lesson 5:
.btn {
/* ...lessons 2 to 5 as before... */
/* Lesson 6: font */
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
}
font-family is a list
The browser walks the list from left to right and uses the first font that is available on the reader's device. system-ui asks for the operating system's own interface font: Segoe UI on Windows, San Francisco on Apple devices, Roboto on Android. The named fonts after it cover browsers or systems where system-ui is not available, and sans-serif at the end is a generic family that every browser can always supply.
Two quoting rules apply. Names with spaces go in quotes, which is why "Segoe UI" has them. Generic families must never be quoted: "sans-serif" in quotes asks for a font literally named sans-serif, which no device has.
font-size: 1rem
One rem equals the root font size, 16px unless the reader has changed the default in their browser settings. The links were already 16px by inheritance, so they barely move; the button jumps from its small default to 16px. Because lesson 3 set the padding in em, the button's padding grows with it to 12px top and bottom and 24px on each side, now the same as the links.
Why rem rather than px? Someone who sets their browser's default font size to 20px gets 20px buttons with 1rem and 16px buttons with 16px. Page zoom scales both, but the font size setting only reaches relative units.
font-weight: 600
Weights run from 100 (thin) to 900 (black). 400 is normal and 700 is bold, so 600 is semibold, a little firmer than body text without shouting. If the font on a device has no 600 weight, the browser picks the nearest heavier one it has, so on some systems 600 looks exactly like bold. That is expected, not a mistake.
line-height: 1.25
line-height sets the height of each line of text. A plain number multiplies the element's own font size: 1.25 × 16px = 20px. Add 12px of padding top and bottom and 2px of border top and bottom, and the button is 20 + 24 + 4 = 48px tall without anyone ever writing a height. The links reach the same 48px once lesson 10 changes how they are displayed.
Leave the number unitless. A value like 1.25em is turned into a fixed length on the element and that length is passed down to children unchanged, while a plain number is passed down as a factor and recalculated for each element's own font size.
Before and after
| Before this lesson | After | |
|---|---|---|
| Links | Page default font, 16px, normal weight | System interface font, 16px, weight 600 |
<button> |
Control font, a little over 13px | Exactly the same as the links |
Padding on the <button> |
About 10px by 20px | 12px by 24px, like the links |
| Line height | normal, which varies by font |
1.25 on all three |
Questions
Could I use the font shorthand instead?
Yes. This one line sets weight, size, line-height and family together:
.btn {
font: 600 1rem/1.25 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
The shorthand also resets everything you leave out, such as font-style, to its default, and the size and family are required. A common pattern you will see in other stylesheets is font: inherit; on buttons, which makes them copy the font of their parent exactly. We spell the four properties out so each one can be read and changed on its own.
Should I load a web font?
You can, through a font service's stylesheet link or your own files with @font-face, and its name then goes at the front of the stack. For buttons the system font is a sound choice: it costs no download and looks at home on every device.
Try it: in the online HTML editor, change the weight to 400 and then 800, and the line-height to 1 and then 2. The button's height follows line-height and ignores the weight.