Typography
Most of the web is text. Good typography makes it easy and pleasant to read; bad typography makes people leave.
On this page · 5 min · Beginner
On this page
- Learning objectives
- Explanation
- Code example
- Step by step
- Real-world use
- Common mistakes
- Best practices
- Remember this
- Practice exercise
- Mini quiz
- Related topics
- My notes
- Reading time
- 5 min
- Difficulty
- Beginner
- Updated
- Oct 28, 2026
Related tutorials
Learning objectives#
- Set fonts with a fallback stack
- Load a web font from Google Fonts
- Control size, weight, line height and spacing
- Make text readable on all screens
Explanation#
font-family takes a list: font-family: "Inter", system-ui, sans-serif. If the first font is missing, the browser tries the next. Always end with a generic family (serif, sans-serif, monospace).
Web fonts: add a <link> from Google Fonts, then use the font name in font-family. Load only the weights you use.
font-size sets size (use rem); font-weight sets thickness (400 normal, 700 bold); line-height sets the gap between lines (1.5–1.7 for body text, no unit).
text-align (left, center, right, justify), text-transform (uppercase), letter-spacing and text-decoration fine-tune appearance.
Readable lines are 45–75 characters long. Use max-width: 65ch on text containers.
Code example: A readable article#
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
body { font-family: "Inter", system-ui, sans-serif; color: #1f2937; }
article { max-width: 65ch; margin: auto; }
h1 {
font-family: "Merriweather", Georgia, serif;
font-size: clamp(1.6rem, 4vw, 2.4rem);
line-height: 1.2;
}
p { font-size: 1.05rem; line-height: 1.7; }
.kicker { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; font-size: 0.8rem; color: #2965f1; }
a { color: #2965f1; text-decoration-thickness: 2px; text-underline-offset: 3px; }
</style>
<article>
<p class="kicker">Travel</p>
<h1>Ten Days in the Himalayas</h1>
<p>We started in Manali with heavy bags and light hearts. The road climbed through pine forests and the air grew colder with every turn. Read the <a href="#">full itinerary</a>.</p>
</article>
A centred article with a small blue uppercase label, a bold serif heading and comfortable body text with spaced underlined links.
Step-by-step explanation#
- Two Google Fonts are loaded with only the weights used.
- Each font-family ends with fallbacks in case the web font fails.
- max-width: 65ch keeps lines about 65 characters wide.
- clamp(1.6rem, 4vw, 2.4rem) makes the heading grow with the screen but stay between a minimum and maximum.
- line-height: 1.7 gives body text room to breathe.
- The kicker uses uppercase with extra letter spacing so it stays legible.
Real-world use case#
News and blog sites limit line length and use generous line height so long articles are comfortable to read on phones and desktops.
Common mistakes#
px ignores the user’s browser font setting. rem respects it.
Three or more font families look messy and slow the page. Use one or two.
200-character lines are tiring to read. Limit with max-width in ch.
Best practices#
- Use at most two font families
- Body text at least 1rem (16px)
- Unitless line-height of 1.5–1.7
- Use font-display: swap (the &display=swap URL parameter) so text shows while fonts load
Remember this#
Font stack = Plan A, Plan B, Plan C… always end with a generic family.
Comfortable line = 45–75 characters → max-width: 65ch.
line-height without a unit scales with the font size.
Practice exercise#
Your task: Style a paragraph with Georgia (serif fallback), 1.125rem size, 1.6 line height and a 60ch maximum width.
Need a hint?
Show solution
p {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.125rem;
line-height: 1.6;
max-width: 60ch;
}
Mini quiz#
Why end font-family with sans-serif or serif?
Want more? Practise all CSS MCQs · CSS interview questions
My notes#
Saved in this browser.