Learn how to style text with CSS using font properties, text alignment, decoration, transformation, and spacing to create readable, well-designed content.
CSS provides several properties for controlling how text is rendered:
font-family — Sets the typeface. You can specify a list of fonts as a fallback stack: font-family: "Helvetica Neue", Arial, sans-serif;. The browser uses the first available font.
font-size — Controls the size of the text. Common units include px (pixels), em (relative to parent), and rem (relative to root element).
font-weight — Sets how bold the text is. Common values are normal (400), bold (700), or numeric values from 100 to 900.
line-height — Controls the spacing between lines of text. A unitless value like 1.6 means 1.6 times the font size, which is a common choice for body text readability.
<style>
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-weight: bold;
letter-spacing: 2px;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
text-align: justify;
}
.uppercase {
text-transform: uppercase;
letter-spacing: 4px;
}
.decorated {
text-decoration: underline;
text-decoration-color: tomato;
}
</style>
<h1>Typography Matters</h1>
<p>Good typography improves readability and creates
visual hierarchy on the page.</p>
<p class="uppercase">This text is uppercase</p>
<p class="decorated">This text is underlined in red</p>Beyond font properties, CSS offers additional ways to style text:
text-align — Aligns text within its container: left, right, center, or justify.
text-decoration — Adds or removes lines on text: underline, overline, line-through, or none. Commonly used to remove the default underline on links: a { text-decoration: none; }.
text-transform — Changes the capitalization: uppercase, lowercase, or capitalize (first letter of each word).
letter-spacing — Adjusts the space between characters. Useful for headings and uppercase text. Positive values increase spacing, negative values tighten it.
word-spacing — Adjusts the space between words, similar to letter-spacing but at the word level.
Combining these properties thoughtfully creates a clear visual hierarchy that guides readers through your content.
What does the CSS property text-transform: capitalize; do?