CSS Text Styling

Align, space, decorate and transform text for readable pages.

Lesson 9 of 49Beginner12 min read

Most of the web is text, so the way text is styled matters more than almost anything else on a page. A few properties, such as alignment, line height and spacing, make the difference between a wall of words and something people are happy to read.

Good text styling is often invisible. Visitors don't notice comfortable line spacing or a sensible line length; they just find the page easy to read and stay longer. In this lesson you'll learn the properties that control how text sits on the page.

Text alignment and spacing

PropertyExampleWhat it does
text-alignleft, center, right, justifyHorizontal alignment
line-height1.6Space between lines (a unitless number is best)
letter-spacing0.05emSpace between letters
word-spacing4pxSpace between words
text-indent2emIndents the first line

Left-aligned text is the easiest to read in long passages. Centred text works for short headings and buttons but becomes tiring over several lines, because each line starts in a different place.

justify stretches lines to fill the full width, which can leave large gaps between words on narrow screens. Use it with care.

Text decoration and letter case

PropertyExampleWhat it does
text-decorationnone, underline, line-throughDraws lines on text
text-underline-offset4pxMoves the underline down
text-transformuppercase, capitalizeChanges the case visually
text-shadow2px 2px 4px #0005Adds a shadow behind letters

text-transform only changes how text looks. Screen readers and search engines still see the original letters, so write your HTML in normal sentence case and let CSS create the capitals.

Handling long text and overflow

  • white-space: nowrap stops text from wrapping onto a new line.
  • overflow-wrap: anywhere lets very long words, such as URLs, break so they don't spill out of their box.
  • The ellipsis pattern, white-space: nowrap; overflow: hidden; text-overflow: ellipsis;, cuts off text that doesn't fit and adds "…", as in "Some long tit…".

The ellipsis is common in tables, file lists and card titles, where the layout must stay neat whatever the length of the text.

Text and accessibility

Good text styling is also an accessibility issue. Keep body text at least 16px (1rem), use a line height of around 1.5, and make sure the contrast between text and background is at least 4.5 to 1 for normal text. Avoid justified text (text-align: justify) on narrow screens: it creates uneven gaps between words, called rivers, that make reading harder, especially for people with dyslexia. Left-aligned text with a ragged right edge is easiest to read in English. Limit paragraphs to roughly 60 to 75 characters per line with max-width: 65ch, which you'll learn more about in the responsive typography lesson.

Text in other languages

CSS text properties work with every writing system. text-align: start aligns to the left in English but to the right in Arabic and Hebrew, which is why it's a better default than left for multilingual sites. text-transform: uppercase follows the rules of the page's lang attribute, and hyphens: auto only hyphenates correctly when lang is set.

CSS Text Syntax

Common text properties

p {
  text-align: left;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
}

CSS Text Summary

  • text-align controls horizontal alignment; left-aligned text is easiest to read.
  • Use a unitless line-height of around 1.5 to 1.7 for body text.
  • letter-spacing, word-spacing and text-indent fine-tune spacing.
  • text-transform and text-decoration change case and lines without changing the HTML.
  • Use white-space, overflow-wrap and text-overflow to handle long text.

CSS Text Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Readable article text

Try changing line-height to 1 and then 2.5 to feel the difference.

article {
  max-width: 60ch;
  font-family: Georgia, serif;
}

h2 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

p {
  line-height: 1.7;
  text-indent: 2em;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2Limits lines to about 60 characters for comfortable reading.
  2. Line 7Centres the heading.
  3. Lines 8 to 9Uppercase with a little extra letter spacing, a classic heading style.
  4. Line 13Roomy lines make paragraphs much easier to read.
  5. Line 14Indents the first line like a book.
Example 2

Links, shadows and ellipsis

.fancy {
  color: #4467ff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.glow {
  color: white;
  background: #15161b;
  text-shadow: 0 0 12px #f0592b;
  padding: 10px;
}

.title {
  width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px dashed #aaa;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 3 to 5A thicker underline, pushed further from the text.
  2. Line 12A blurry orange shadow makes a neon glow.
  3. Lines 17 to 20The ellipsis trick: one line, hide the overflow, show "…".

Common CSS Text Mistakes

Removing link underlines with nothing else

Don't
a { text-decoration: none; color: inherit; }
Do
a { text-decoration: none; color: #4467ff; font-weight: 600; }
a:hover { text-decoration: underline; }

If links look exactly like normal text, nobody knows they can click them.

Typing in capitals instead of using text-transform

Don't
<h2>OUR SERVICES</h2>
Do
<h2 class="caps">Our services</h2>
<style> .caps { text-transform: uppercase; } </style>

Screen readers may spell out ALL-CAPS words letter by letter, and you can't change it later without editing the HTML.

CSS Text in Real Projects

Typography makes sites feel premium

Look at a well-designed site like a magazine or a bank: generous line height, uppercase labels with letter spacing, carefully offset underlines, and long titles neatly truncated with an ellipsis in cards and tables. These small properties do a lot of heavy lifting.

CSS Text Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Centre the heading and make it uppercase.

h1 {
  : center;
  text-transform: ;
}
Multiple choiceeasy

Which removes the underline from links?

Multiple choicemedium

Which line-height value is best for body text?

Fix the bugmedium

The product name should stay on one line and end with "…" when too long, but it's wrapping. Fix the CSS.

.name {
  width: 200px;
  text-overflow: ellipsis;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Text doesn't wrap
  • Overflow is hidden
  • Ellipsis is set

CSS Text Quiz

3 questions to check what you learned.

  1. Which property spaces out letters?

    • letter-spacing
    • word-spacing
    • text-spacing
    • font-spacing

  2. What does text-transform: capitalize do to "hello world"?

    • HELLO WORLD
    • Hello world
    • hello world
    • Hello World

  3. Why is a unitless line-height like 1.6 recommended?

    • It loads faster
    • It scales with each element's font size
    • Units aren't allowed
    • It's always 16px

CSS Text Challenge

Style a pull quote

Style .pull so that:

  1. Text is centred
  2. font-style is italic
  3. line-height is 1.5
  4. It has a letter-spacing of 0.02em or more
  5. The cite inside it is uppercase
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Centred
  • Italic
  • Line height 1.5
  • Letter spacing added
  • Cite is uppercase

Related CSS topics

10FontsFont families, sizes, weights, the font shorthand and web fonts.06ColorsColour names, HEX, RGB, HSL, transparency and contrast.11Units (px, rem, %)Pixels, rems, percentages, viewport units and fluid sizes.
Esc
↑↓ to navigateEnter to open