Font Properties
CSS provides several properties to control typography: font-family for the typeface, font-size for scale, font-weight for boldness, and more.
Basic Font Styling
<style>
p {
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.6;
}
</style>
<p>This text is styled with a custom font family, size, and weight.</p>Output
Common Text Properties
| Property | Purpose |
|---|---|
| font-family | The typeface, with fallbacks |
| font-size | The size of the text |
| font-weight | Boldness, from 100 (thin) to 900 (black) |
| font-style | italic or normal |
| line-height | Vertical spacing between lines |
| letter-spacing | Horizontal space between characters |
| text-align | left, center, right, or justify |
| text-decoration | underline, line-through, or none |
| text-transform | uppercase, lowercase, or capitalize |
Text Alignment and Decoration
<style>
.centered {
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}
.link {
text-decoration: none;
color: steelblue;
}
.link:hover {
text-decoration: underline;
}
</style>
<h2 class="centered">Section Title</h2>
<a href="#" class="link">Hover this link</a>Output
Font Fallbacks
font-family accepts a comma-separated list. The browser uses the first font available on the user’s system, falling back to the next, ending in a generic family like sans-serif or serif as a safety net.
Web Fonts
Custom web fonts (like Google Fonts) are loaded with @font-face or a <link> tag, then referenced by name in font-family just like a system font.
Loading a Web Font
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>Output
Best Practice
Always end a font-family list with a generic fallback (sans-serif or serif), and keep line-height around 1.4–1.6 for comfortable reading on body text.