The CSS text-transform property changes letter case for presentation without changing the HTML source. Use it when capitalization is a design choice; keep grammatical capitalization, such as acronyms, in the HTML. section 12.6.2 section 4.3.2
Common practical uses include:
- Set navigation labels to uppercase while retaining normally authored text in the markup. section 12.6.2
- Make a login-form heading uppercase without retyping its HTML content. section 4.3.2
- Use lowercase when the design calls for reduced letter case. section 12.6.2
Uppercase navigation labels
Apply the transformation alongside text sizing and spacing: .top-nav a { font-size: 0.8rem; padding: 0.3rem 1.25rem; text-transform: uppercase; letter-spacing: 0.03em; }. Uppercase text generally benefits from slightly increased letter spacing. section 12.6.2
Listing 12.14 Adjusting size and spacing of nav menu items
.nav-container__inner {
display: flex;
justify-content: space-between;
align-items: end; #1
max-inline-size: 1080px;
margin-inline: auto;
padding: 0.625em 0;
}
…
.top-nav a {
display: block;
font-size: 0.8rem; #2
padding: 0.3rem 1.25rem; #3
color: var(--white);
background: var(--brand-green);
text-decoration: none;
border-radius: 3px;
text-transform: uppercase; #4
letter-spacing: 0.03em; #4
}
Inspect the complete navigation ruleset to see text-transform working with font size, padding, alignment, color, and letter spacing. section 12.6.2
