🌱BeginnerCSS Text and Fonts
CSS Fonts
Style typography with font-family, font-size, font-weight, font-style, and the font shorthand.
Overview
Typography is one of the most impactful aspects of web design, and CSS gives you complete control over it. The core font properties are:
- `font-family` which typeface to use, with fallbacks
- `font-size` how large the text is
- `font-weight` how bold the text is (100–900 or named keywords)
- `font-style` italic, oblique, or normal
- `font-variant` small-caps and other variants
**Font stacks** are comma-separated lists of fonts. The browser uses the first available font and falls back to the next. Always end with a generic family: `serif`, `sans-serif`, `monospace`, `cursive`, or `fantasy`.
All font properties can be combined into the `font` shorthand: `font: style variant weight size/line-height family`.
Key Points
- •font-family takes a comma-separated stack browser uses the first font it finds
- •Always end font stacks with a generic family: serif, sans-serif, or monospace
- •font-size accepts px, em, rem, and % rem is the most predictable for scaling
- •font-weight: bold = 700; normal = 400; numeric values range from 100 to 900
- •font-style: italic displays the italic version of a font
- •font shorthand: font: italic bold 1rem/1.5 "Open Sans", sans-serif
Examples
Font family with fallback stack
body {
/* System fonts for fast loading no download needed */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Helvetica, Arial, sans-serif;
}
code, pre {
font-family: 'Courier New', Courier, monospace;
}The system font stack uses the device's native UI font, which loads instantly.
font-size, font-weight, and font-style
h1 { font-size: 2.5rem; font-weight: 800; }
h2 { font-size: 1.75rem; font-weight: 600; }
blockquote {
font-style: italic;
font-size: 1.1rem;
}
.label {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
}Font shorthand
/* font: style variant weight size/line-height family */
p {
font: normal normal 400 1rem/1.6 'Georgia', serif;
}
/* Minimal shorthand size and family are required */
h1 {
font: bold 2rem 'Arial', sans-serif;
}When using font shorthand, size and family are required. Omitting optional values resets them to their initial values.
Common Mistakes
- Forgetting the generic fallback at the end of a font stack
- Using font-weight: bold when you need to match a specific weight like 600 or 700
- Setting font-size in px everywhere use rem for accessible scaling
Note
Use rem for font-size so text scales when the user changes their browser's default font size. 1rem = browser default (typically 16px). Most headings use 1.25rem–3rem; body text 1rem–1.125rem.
Exercises
Write CSS to style the HTML scaffold. The preview updates live — when it looks right, mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4