20 min read
Fonts and Text
font-family with fallbacks, sizes in px and rem, weight, line height, alignment, decoration and letter spacing.
font-family and Fallbacks
Body and heading fontsCSS
body { font-family: "Open Sans", Arial, sans-serif;} h1,h2,h3 { font-family: "Playfair Display", Georgia, serif;}The browser tries each font in order and uses the first one available. Always end with a generic family — serif, sans-serif or monospace. Put names with spaces in quotes. To use Google Fonts, you add the <link> code Google gives you to the head; otherwise, the fallbacks are used.
Text Properties
| Useful text properties | ||
|---|---|---|
Units: px, em and rem
- px — pixels: fixed and easy to understand.
- rem — a multiple of the root (html) font size. If the root is 16px, 2rem = 32px. If a visitor increases the browser's text size, rem sizes grow with it — good for accessibility.
- em — a multiple of the parent's font size.
- % — a percentage of the parent's value.
What the browser shows
Try it: Change line-height to 1 and then 2 — which is easiest to read? Try text-align: center on h1.
Practice
What happens with font-family: "Playfair Display", Georgia, serif; if Playfair Display is not available?
More lessons in CSS · Next: The Box Model · Previous: Colours and Backgrounds