Text Styling
Align, decorate, and transform text.
Syntax
text-align: center; text-transform: uppercase;Common text properties include:
text-align— left, right, center, justify.text-decoration— underline, overline, line-through, none.text-transform— uppercase, lowercase, capitalize.letter-spacingandline-height— control spacing.
Example
Loading editor…
Press Run to see the result.
When to use it
- A designer centers article headlines with text-align: center and left-aligns body text for comfortable reading.
- A developer uses text-transform: uppercase on navigation labels to match a brand style guide without changing the HTML text.
- A developer applies letter-spacing: 0.05em to a logo text element to achieve an open, airy typographic feel.
More examples
Text alignment and line height
Sets readable line-height on body text and centers the hero title with tighter letter-spacing.
body {
text-align: left;
line-height: 1.6;
}
.hero-title {
text-align: center;
letter-spacing: -0.02em;
}Text decoration and transform
Removes underline from nav links and applies uppercase transform with wide letter spacing for a label style.
a {
text-decoration: underline;
}
.nav-link {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.08em;
}Word and letter spacing for headings
Uses opposing letter-spacing adjustments — tight for large headings and wide for small eyebrow labels.
h1 {
text-transform: capitalize;
letter-spacing: -0.03em;
word-spacing: 0.1em;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.75rem;
}
Discussion