Fonts are a fundamental part of web design, influencing the readability, aesthetics, and overall user experience of a website. CSS provides extensive control over fonts, allowing developers to define typography styles that match their brand identity.
In this guide, we'll cover everything about fonts in CSS, including font-family, font-size, font-weight, font-style, and more.
1. CSS font-family
The font-family property defines the typeface used in a webpage. It allows you to specify multiple font choices, ensuring a fallback if the primary font is not available.
Syntax:
font-family: "Arial", sans-serif;
Usage:
body {
font-family: "Roboto", "Helvetica", sans-serif;
}
Types of Fonts:
Serif Fonts: Times New Roman, Georgia
Sans-serif Fonts: Arial, Helvetica, Roboto
Monospace Fonts: Courier New, Consolas
Cursive Fonts: Comic Sans MS, Brush Script MT
Fantasy Fonts: Papyrus, Impact
It is best practice to use a font stack (a list of fonts) to ensure proper fallback.
2. CSS font-size
The font-size property defines the size of the text.
Syntax:
font-size: 16px;
Units Used in Font Size:
Absolute Units:
px(pixels): Fixed size, commonly used for precision.pt(points): Used in print media.cm,mm,in: Rarely used in web design.
Relative Units:
em: Relative to the parent element’s font size.rem: Relative to the root element (html).%: Relative to the parent’s font size.vw,vh: Based on viewport width or height.
Example:
p {
font-size: 1.5em; /* 1.5 times the parent's font size */
}
3. CSS font-weight
The font-weight property specifies how bold or light a font appears.
Syntax:
font-weight: bold;
Values:
Keyword values:
normal,bold,lighter,bolderNumeric values:
100to900
Example:
h1 {
font-weight: 700; /* Bold */
}
4. CSS font-style
The font-style property is used to set text to normal, italic, or oblique.
Syntax:
font-style: italic;
Example:
em {
font-style: oblique;
}
5. CSS font-variant
The font-variant property controls text transformations such as small caps.
Syntax:
font-variant: small-caps;
Example:
p {
font-variant: small-caps;
}
6. CSS line-height
The line-height property controls the spacing between lines of text.
Syntax:
line-height: 1.6;
Example:
p {
line-height: 1.8;
}
7. CSS letter-spacing & word-spacing
These properties control the spacing between letters and words.
Syntax:
letter-spacing: 2px;
word-spacing: 5px;
Example:
h2 {
letter-spacing: 1px;
word-spacing: 3px;
}
8. CSS text-transform
This property changes the case of text.
Syntax:
text-transform: uppercase;
Values:
uppercaselowercasecapitalize
Example:
h3 {
text-transform: capitalize;
}
9. CSS text-align
The text-align property controls horizontal text alignment.
Syntax:
text-align: center;
Values:
leftrightcenterjustify
Example:
p {
text-align: justify;
}
10. Using Google Fonts
Google Fonts provides free web fonts that can be easily added to your website.
Steps to Use Google Fonts:
Go to Google Fonts.
Select a font and copy the
<link>tag.Add it to your HTML
<head>.Use it in CSS with
font-family.
Example:
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
</head>
body {
font-family: 'Poppins', sans-serif;
}
Conclusion
Fonts play a crucial role in web design, impacting readability and aesthetics. Understanding CSS font properties helps create a visually appealing and user-friendly website. By leveraging font-family, font-size, font-weight, and other typography properties, developers can ensure a well-structured and responsive design.