Line Height, Spacing, and Text Transformation

Line height, letter spacing and word spacing improve reading rhythm; text transformation changes how characters appear without rewriting HTML.

line-height controls the height of each line box. A unitless value such as 1.6 is especially useful because it scales with font size and inherits as a multiplier. letter-spacing adjusts character spacing; word-spacing adjusts the spaces between words.

text-transform: uppercase changes the rendered casing but not the underlying text. Avoid wide letter spacing or all-caps for lengthy paragraphs.

These properties adjust glyph placement and line-box geometry; they do not insert letters or spaces into the HTML.

Give a multi-line paragraph breathing room without adding extra paragraphs.

HTML

<p class="readable">Readable content benefits from enough distance between lines. We can improve comfort without changing the words people read.</p>

CSS

.readable { max-width: 330px; font-family: Arial, sans-serif; line-height: 1.65; padding: 14px; background: #f1f5f9; }

Rendered output

Observe: The paragraph takes multiple lines with larger vertical separation.

Transform the presentation of a label and tune tracking.

HTML

<div class="eyebrow"><span>New collection</span><p>Explore this month’s highlights.</p></div>

CSS

.eyebrow { padding: 14px; background: #f8fafc; }
.eyebrow span { text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: #0f766e; }
.eyebrow p { margin: 9px 0 0; line-height: 1.5; }

Rendered output

Observe: The label displays in uppercase with additional tracking, while the paragraph remains normal case.

These properties adjust glyph placement and line-box geometry; they do not insert letters or spaces into the HTML.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Avoid line-height smaller than the font requires; adjacent lines may collide.
• CSS text-transform does not modify the string copied from the document.

Try line-height values of 1, 1.4 and 1.8, and compare readability. Set text-transform to capitalize on the label.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use line-height for readable rhythm and spacing or casing changes for brief decorative labels.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.