Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
CSS Font Properties & Typography
Typography is one of the most impactful aspects of web design - good typography makes content readable and professional. CSS gives you complete control over fonts, sizing, weight, line height, letter spacing, and more.
Font Properties
- font-family - Sets the typeface: font-family: 'Inter', Arial, sans-serif. Always include a fallback stack
- font-size - Text size: 16px, 1rem, 1.25em. Default browser size is 16px. Use rem for accessibility
- font-weight - Boldness: normal (400), bold (700), or numeric values 100-900. 600 = semi-bold
- font-style - italic, normal, oblique. Use for emphasis (<em> tags)
- line-height - Space between text lines: 1.6 for body text, 1.2-1.3 for headings. Unitless values recommended
- letter-spacing - Space between characters: letter-spacing: 0.05em for headings. Negative values tighten text
- word-spacing - Space between words. Rarely changed, but useful for justified text
- font shorthand - font: italic 700 1.25rem/1.4 'Inter', sans-serif (style weight size/line-height family)
Typography Code
/* Professional typography system */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, sans-serif;
font-size: 16px;
line-height: 1.6; /* Comfortable reading */
color: #333;
}
/* Heading scale */
h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: 2rem; font-weight: 700; line-height: 1.25; }
h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
/* Paragraph */
p {
font-size: 1rem;
line-height: 1.6;
max-width: 65ch; /* Optimal reading width */
margin-bottom: 1em;
}
/* Small text */
.caption { font-size: 0.875rem; color: #666; }
.overline {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
color: #888;
}Tip
Define a typography system using CSS custom properties in :root - --font-heading, --font-body, --line-height-base. Changing one variable updates every element instantly, making global typography adjustments effortless.
Use rem for fonts, % for widths, vw/vh for full-screen layouts
Common Mistake
Using px for font-size locks text and breaks accessibility. If a visually impaired user increases their browser's default font size, px-based text ignores it. Always use rem for font sizes to respect user browser preferences.
Practice Task
Build a typography scale: set h1 to 2.5rem, h2 to 2rem, h3 to 1.5rem, p to 1rem. Add line-height: 1.6 to body and letter-spacing: -0.02em to h1. Open DevTools and observe how the values cascade to nested elements.
Quick Quiz
Key Takeaways
- Typography is one of the most impactful aspects of web design - good typography makes content readable and professional.
- font-family - Sets the typeface: font-family: 'Inter', Arial, sans-serif. Always include a fallback stack
- font-size - Text size: 16px, 1rem, 1.25em. Default browser size is 16px. Use rem for accessibility
- font-weight - Boldness: normal (400), bold (700), or numeric values 100-900. 600 = semi-bold