CSS course menu
CSS Text Styling: text-align, line-height, text-decoration, text-transform and Spacing
Style text with CSS: colour, text-align, line-height, letter-spacing and word-spacing, text-decoration and underline offset, text-transform, text-indent, white-space and word-break, text-wrap balance, and readable line length.
On this page
Beyond choosing a font, CSS has many properties for how text is laid out and decorated.
Alignment#
p { border: 1px dashed #bbb; padding: 4px; }<p style="text-align: left">left (default in left-to-right languages)</p>
<p style="text-align: center">center</p>
<p style="text-align: right">right</p>
<p style="text-align: justify">justify spreads the words in each line so that both edges line up. This can create uneven gaps between words, especially in narrow columns.</p>text-align: start and end follow the text direction, which is better for sites that also support right-to-left languages.
Line height#
line-height sets the height of each line, and so the space between lines. For body text, around 1.5 is comfortable:
p { width: 300px; }<p style="line-height: 1">line-height: 1. Lines are cramped and hard to follow from one line to the next.</p>
<p style="line-height: 1.6">line-height: 1.6. Lines have room to breathe, which is easier to read in long text.</p>Use a unitless number, as explained in Units. Headings usually need less line height (around 1.1 to 1.3) than body text.
Spacing and indentation#
h1 { letter-spacing: -0.02em; } /* tighter large headings */
.label { letter-spacing: 0.08em; } /* airy small capitals labels */
p { word-spacing: 2px; }
p + p { text-indent: 1.5em; } /* book-style first-line indent */Decoration#
a { color: #2f5fe0; }<p><a href="#">Default underline</a></p>
<p><a href="#" style="text-decoration: none">No underline</a></p>
<p><a href="#" style="text-decoration-thickness: 2px; text-underline-offset: 4px">Thicker underline with an offset</a></p>
<p style="text-decoration: line-through">line-through</p>
<p style="text-decoration: underline wavy red">wavy red underline</p>Keep links underlined in body text: colour alone is not enough for people who cannot see the difference.
Transforming case#
<p style="text-transform: uppercase">uppercase text</p>
<p style="text-transform: capitalize">capitalize every word</p>
<p style="text-transform: lowercase">LOWERCASE TEXT</p>Use text-transform for style, such as uppercase buttons, and write the text normally in the HTML, so it reads correctly when copied and for screen readers.
Wrapping and breaking#
.narrow { width: 220px; border: 1px dashed #bbb; }<p class="narrow">https://www.example.com/a/very/long/url/that/does/not/fit</p>
<p class="narrow" style="overflow-wrap: anywhere">https://www.example.com/a/very/long/url/that/does/not/fit</p>Readable text#
- Keep line length to roughly 45 to 75 characters:
max-width: 65chon text containers. - Use a line height of about 1.5 for paragraphs.
- Ensure good colour contrast (Colors).
- Avoid long passages of justified, uppercase or italic text, all of which are harder to read.
Practice#
Practice exercise
Style an article so its text column is at most 60 characters wide, paragraphs have a line-height of 1.6, the heading is centered, uppercase with 0.05em letter-spacing, and links have a 3px underline offset.
Show solution
article { max-width: 60ch; margin: 0 auto; }
article h2 { text-align: center; text-transform: uppercase; letter-spacing: 0.05em; }
article p { line-height: 1.6; }
article a { text-underline-offset: 3px; }<article>
<h2>Reading on screens</h2>
<p>Long lines make it hard to find the start of the next line. A comfortable measure and generous line spacing make long text much easier to read. <a href="#">Learn more about typography</a>.</p>
</article>Key takeaway#
Finished this lesson?