Fonts¶
Fonts control the appearance of text — including typeface, size, weight, spacing, and more.
1. Font Family¶
Set the typeface using font-family. Always include a fallback.
body {
font-family: 'Arial', 'Helvetica', sans-serif;
}
2. Font Size¶
Controls the size of the text.
p {
font-size: 16px;
}
Common units:¶
px— absolute (pixels)em— relative to parentrem— relative to root (html)%— relative to parent
h1 {
font-size: 2em; /* 2x the parent size */
}
3. Font Weight¶
Controls thickness of text.
strong {
font-weight: bold; /* or numeric: 100 to 900 */
}
4. Font Style¶
Used for italics and oblique styles.
em {
font-style: italic;
}
5. Font Variant¶
Used for small-caps.
p {
font-variant: small-caps;
}
6. Line Height¶
Controls vertical spacing between lines of text.
p {
line-height: 1.6;
}
7. Shorthand Property¶
Combine multiple font properties.
p {
font: italic small-caps bold 16px/1.5 'Georgia', serif;
}
8. Web Fonts¶
Import custom fonts using @font-face or via Google Fonts:
Example (Google Fonts):¶
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
body {
font-family: 'Roboto', sans-serif;
}