Font Styles in CSS
CSS provides powerful options for styling text. You can control font family, size, weight, style, line spacing, and more to improve readability and design.
1. Font Family
Specifies the typeface to use. You can define multiple fonts as fallbacks.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
2. Font Size
Defines the size of the font using units like px, em, rem, or %.
p {
font-size: 16px;
}
3. Font Weight
Sets the boldness of the text.
h1 {
font-weight: bold;
}
strong {
font-weight: 700;
}
4. Font Style
Specifies whether the font is normal, italic, or oblique.
em {
font-style: italic;
}
5. Line Height
Controls the vertical spacing between lines of text.
p {
line-height: 1.6;
}
6. Shorthand: font
The font property can set all font-related properties in a single line.
p {
font: italic small-caps 16px/1.5 'Arial', sans-serif;
}
Conclusion
Styling fonts properly enhances readability and design. Use combinations of size, weight, line height, and families to create a visually appealing and accessible user experience.