Loading...
Loading...
Control text appearance with font families, sizes, weights, and spacing
Typography is the art of arranging text. CSS gives you control over the font face, size, weight (boldness), line height (spacing between lines), and more. Good typography makes text readable and professional.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1 {
font-family: Georgia, serif;
font-weight: bold;
font-style: normal;
}| Property | What it does | Values |
|---|---|---|
| `font-family` | Which font to use | `Arial`, `Georgia`, `sans-serif` (always include fallback!) |
| `font-size` | Text size | `16px`, `1.2rem`, `large` |
| `font-weight` | Boldness | `400` (normal), `700` (bold), or keywords |
| `line-height` | Space between lines | `1.5` (multiplier), `24px` |
| `text-align` | Horizontal alignment | `left`, `center`, `right`, `justify` |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;The browser tries each font in order - if Helvetica Neue isnt installed, it tries Helvetica, then Arial, then any sans-serif font. Always end with a generic family.
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body { font-family: 'Roboto', sans-serif; }
</style>Google Fonts lets you use custom fonts for free.
| Wrong | Why | Right |
|---|---|---|
| `font-size: 12px` body text | Too small to read comfortably | Minimum 16px for body text |
| Forgetting fallback fonts | Font not installed = default is used | Always include generic fallback |
| Too many fonts | Looks chaotic and unprofessional | Stick to 2 fonts max |
Create a page with body text using Arial font, 18px size, line-height 1.6, color #444. H1 using Georgia, bold, 36px, dark blue.
<!DOCTYPE html>
<html><head><style>
body { font-family: Arial, sans-serif; font-size: 18px; line-height: 1.6; color: #444; }
h1 { font-family: Georgia, serif; font-weight: bold; font-size: 36px; color: #1a237e; }
</style></head><body>
<h1>Typography</h1>
<p>Good typography makes text readable and professional.</p>
</body></html>