CSS — Lesson 6
Typography & Fonts
Styling text with fonts, sizes, and spacing.
Typography & Fonts
Typography is a crucial part of web design. Good typography improves readability and establishes visual hierarchy.
Font Family
Specify the font for an element. Always include fallback fonts.
body {
font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
Font Size
h1 { font-size: 32px; }
h2 { font-size: 24px; }
p { font-size: 16px; }
Font Weight
h1 { font-weight: 700; } /* bold */
p { font-weight: 400; } /* normal */
Line Height
Controls the vertical space between lines of text. A value of 1.5-1.7 is standard for body text.
p {
line-height: 1.6;
}
Text Alignment
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
Text Decoration
a { text-decoration: none; } /* Remove underline from links */
.strike { text-decoration: line-through; }
Letter Spacing
Useful for uppercase headings and brand text.
h1 {
letter-spacing: 1px;
text-transform: uppercase;
}
Google Fonts
To use Google Fonts, add a link in your HTML head, then reference it in CSS.
<!-- In HTML head -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
/* In CSS */
body {
font-family: "Roboto", sans-serif;
}
Tip: Use a type scale for consistent sizing. A common scale: 16px (body), 20px (h4), 24px (h3), 28px (h2), 36px (h1).
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →