Styling text and fonts
How to control typeface, size, weight, spacing, and alignment. Text styling has an outsized effect on how readable and professional a page feels.
Font properties
The main properties for text styling:
- font-family: the typeface.
- font-size: text size.
- font-weight: thickness (normal, bold, or numeric values).
- font-style: normal or italic.
- line-height: space between lines.
- text-align: left, right, centre, or justify.
- text-decoration: underline, overline, line-through, or none.
- text-transform: uppercase, lowercase, or capitalize.
- letter-spacing and word-spacing: space between characters and words.
Choosing a font
Web-safe fonts (Arial, Times New Roman, Courier) work everywhere without extra setup. For more choice, services like Google Fonts let you link to hosted typefaces. Pick something readable first; decorative second.
A basic example
A simple page with font styling:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1 {
font-size: 32px;
text-align: center;
}
p {
font-size: 18px;
color: #333333;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example paragraph to demonstrate CSS text styling.</p>
</body>
</html>Body text gets a base font and line height. The heading is larger and centred. Paragraphs are slightly bigger than body text with a dark grey colour.
Using Google Fonts
To load a font from Google Fonts:
- Choose a font – say, Roboto.
- Embed it in your
<head>:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">- Apply it in your CSS:
body {
font-family: 'Roboto', sans-serif;
}Responsive typography
Font sizes need to scale on different screens too. Relative units like em, rem, and viewport units (vw, vh) adapt better than fixed pixel sizes.
Font weight and style
To emphasise text:
strong {
font-weight: bold;
}
em {
font-style: italic;
}Text alignment and decoration
Alignment and decoration in one rule:
.center-text {
text-align: center;
text-decoration: underline;
}Letter spacing and line height
Small adjustments can improve readability:
p {
letter-spacing: 0.5px;
line-height: 1.8;
}Text transform
Change case without editing the HTML:
.uppercase-text {
text-transform: uppercase;
}Good typography makes content easier to read. Pick a readable font, set a comfortable line height, and use size and weight to create a clear hierarchy.