CSS Text

CSS Text: Typography Alignment, Spacing, and Readability

CSS text properties shape how words look, align, and breathe inside paragraphs and headings. Clean text spacing turns dense walls of prose into comfortable reading experiences across phones and wide desktop displays.

Essential CSS Text Properties

• color: Sets foreground text color.
• text-align: Aligns lines left, right, center, or justify (or logical start and end).
• line-height: Controls vertical spacing between lines. Unitless numbers like 1.6 scale proportionally with font size—ideal for body paragraphs (1.5–1.7) and tight headings (1.2).
• text-decoration: Controls underlines (none, underline), line color, and text-underline-offset for cleaner link styling.
• text-transform: Converts display text to uppercase, lowercase, or capitalize visually without altering HTML content.
• letter-spacing: Adjusts tracking between letters (slight positive tracking helps uppercase badges read clearly).

.article-body {
    color: #1e293b;
    font-size: 1rem;
    line-height: 1.65;
    max-width: 65ch;
}

.article-body a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.eyebrow-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

Optimal Line Length and Alignment

Limit body copy width to around 60ch to 75ch (characters per line) so eyes track from one line to the next effortlessly. Avoid text-align: justify; on web columns because browsers lack print hyphenation control and stretch uneven gaps ("rivers") between words.

Common Mistakes to Avoid

• Setting line-height: 24px in fixed pixels: Fixed pixel line heights break whenever child text scales larger; use unitless multipliers like 1.6.
• Removing underlines on inline paragraph links: Links inside prose must stand out by more than color alone—keep underlines or clear border-bottom cues.
• Typing ALL CAPS directly in HTML: Write normal sentence case in HTML and apply text-transform: uppercase; in CSS so screen readers do not read acronyms letter-by-letter.

Frequently Asked Questions

What does text-overflow: ellipsis require to work?

To truncate overflowing single-line text with ..., combine white-space: nowrap;, overflow: hidden;, and text-overflow: ellipsis; on a block or flex item with constrained width.

Why is unitless line-height preferred over px or em?

Unitless values (1.6) pass the multiplier down to child headings or small captions so each element computes its own clean line height.