16 min read
Choosing Fonts
Serif and sans-serif, readable sizes and line lengths, web fonts, and why two fonts are usually enough.
Font Families
Serif vs sans-serif
| Serif | Sans-serif |
|---|---|
| Small strokes (serifs) at the ends of letters | Clean letters without serifs |
| Traditional, elegant, classic | Modern, simple, very readable on screens |
| Examples: Georgia, Times New Roman, Playfair Display | Examples: Arial, Verdana, Open Sans, Roboto |
| Good for headings with a classic feel | Good for body text and small sizes |
Other families you will meet in CSS: monospace (every letter the same width, for code), cursive/script (handwriting style — use only for short decorative text) and display fonts (bold decorative headings).
Readability
| Readable text on the web | |
|---|---|
Web-Safe Fonts and Web Fonts
A web-safe font (Arial, Verdana, Georgia, Times New Roman) is already installed on almost every device. A web font is downloaded with the page — for example from Google Fonts — so you can use fonts visitors do not have. Always add a fallback: font-family: "Open Sans", Arial, sans-serif; means "use Open Sans; if that fails, Arial; if that fails, any sans-serif".
Practice
More lessons in Planning a Website · Next: Choosing and Optimising Images · Previous: Colour Schemes