Topic 9 of 30
Typography
Overview
CSS typography controls font families, sizes, weights, line heights, and letter spacing. Good typography is the single biggest factor in readability and professional appearance of a website.
Syntax
css
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px; /* base size */
font-weight: 400; /* 100–900 */
line-height: 1.6; /* unitless is best practice */
letter-spacing: 0.01em;
text-transform: none; /* uppercase | capitalize */
text-decoration: none;
text-align: left; /* center | right | justify */
}
/* Fluid typography */
h1 {
font-size: clamp(1.5rem, 5vw, 3.5rem);
}Common Pitfalls
- Use unitless line-height (e.g., 1.6 not 1.6px) — it scales proportionally with font-size.
- Avoid justify text alignment on the web — it creates uneven letter spacing and hurts readability.
- Interview tip: rem is relative to root font size; em is relative to parent font size — rem is preferred for consistency.
Real-World Example
A type scale for a professional blog with Google Fonts:
example
css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
--font-sans: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-4xl: 2.25rem;
}
body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.7; }
h1 { font-size: clamp(2rem, 5vw, var(--text-4xl)); font-weight: 700; }
code, pre { font-family: var(--font-mono); font-size: 0.9em; }