Most of the web is text, so typography is one of the highest-impact skills in CSS. Small changes to font, size and spacing make text dramatically more readable and professional.
Key text properties
| Property | Controls |
|---|---|
| font-family | The typeface |
| font-size | Text size |
| font-weight | Boldness (400 normal, 700 bold) |
| line-height | Space between lines |
| letter-spacing | Space between letters |
| text-align | left, center, right, justify |
<article class="a"><h2>Readable</h2><p>Notice how line height gives the text room to breathe across several lines of body copy.</p></article>.a{font-family:Georgia,serif;font-size:18px;line-height:1.6;color:#333}
.a h2{font-family:sans-serif;font-weight:700}Readability basics
Comfortable body text is around 16–18px with a <code>line-height</code> near 1.5. Generous spacing is one of the easiest ways to look professional. Headings can be tighter and bolder for contrast.
Web fonts
Beyond system fonts, you can load custom web fonts (for example from Google Fonts) by linking them in the HTML head, then naming them in <code>font-family</code>. Always list a fallback after your custom font.
p { line-height: 1; }p { line-height: 1.6; }Cramped line-height makes paragraphs hard to read. Give body text room (around 1.5).
Limit line length to roughly 60–75 characters (max-width ~65ch). Very wide text is tiring to read.
Style an article: set a font-family, 18px size, line-height 1.6, and make the heading bold and a different font. Then add letter-spacing to the heading.
1. Which property sets the typeface?
2. A comfortable body line-height is around…
3. Why add a fallback font?
- Key type properties: font-family, font-size, font-weight, line-height, letter-spacing.
- Body text ~16–18px with line-height ~1.5 reads best.
- Limit line length to ~65 characters.
- Load web fonts with a fallback after them.