Typography & Fonts (font-size, font-weight, line-height)
Typography is 90% of web design. If your typography is clean, your site looks like an Apple product. If your typography is bad, your site looks like a scam. Master font-family, font-size, font-weight, and line-height.
"font-size is the volume of your voice. font-weight is how firmly you lean into words (bold vs light). line-height is the breathing room between lines of text so sentences don't crash into each other like a multi-car pileup."
Deep Dive: How It Works
font-family: Sets the typeface (e.g. system-ui, Inter, JetBrains Mono). Always provide fallback fonts: font-family: Inter, sans-serif;.
font-size: Sets text size in px or rem (e.g. 16px, 1.25rem).
font-weight: Controls thickness: 400 (normal/regular), 600 (semibold), 700 (bold).
line-height: Controls vertical line spacing. For body paragraphs, 1.5 or 1.6 gives optimal readability.
letter-spacing: Controls tracking/spacing between characters (great for uppercase badges: letter-spacing: 0.05em;).
Syntax Blueprint
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
}Modern clean system typography stack with optimal line height.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Using units like px on line-heightWhy it happens: Writing line-height: 1.5px crushes all text into a single overlapping line.
How to fix: line-height is usually unitless (e.g. line-height: 1.6;) which multiplies by the font size automatically.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Style paragraph typography
- Write a CSS rule for p setting font-size: 16px; and line-height: 1.6;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.