Text Properties

In the world of web typography, text properties are the foundation of readable, engaging, and accessible content. These subtle yet powerful CSS rules shape how words interact with users, influencing everything from visual harmony to cognitive processing. Let’s dive into five essential text properties that every CSS practitioner should master—practiced with precision and purpose.

Text Alignment

Text alignment defines how text flows within its container horizontally. This property is critical for creating visual rhythm and balancing content across layouts. The default value left is the most common, but strategic alignment choices can dramatically improve readability and aesthetics.

Key values include:

left: Text aligns to the left (default)
right: Text aligns to the right
center: Text aligns to the center
justify: Text aligns to both left and right edges (common for paragraphs)
multiline: Text aligns to the right for multi-line text (less common)

<code class="language-css">/<em> Left alignment (default) </em>/
<p>p {</p>
<p>  text-align: left;</p>
<p>}</p>

<p>/<em> Center alignment </em>/</p>
<p>.centered-text {</p>
<p>  text-align: center;</p>
<p>}</p>

<p>/<em> Justified alignment </em>/</p>
<p>.paragraph {</p>
<p>  text-align: justify;</p>
<p>  /<em> Note: Justification often requires manual line breaks for readability </em>/</p>
<p>}</code>

Real-world example: Consider a blog post where paragraphs flow naturally from left to right. Using text-align: justify on paragraphs creates a clean, professional look—though be cautious as over-justification can cause uneven spacing between words. For responsive designs, you might switch to text-align: left on mobile to maintain readability.

Line Height

Line height controls the vertical space between lines of text. It’s arguably the most impactful text property for readability and visual comfort. Unlike font size, line height operates independently and can dramatically alter how text feels—too short creates strain, too long reduces density.

How it works:

Numerical value: Relative to font size (e.g., 1.5 = 1.5 times the font size)
Length units: em, rem, px, pt (e.g., 1.2em)
Default: 1.2 (a good baseline for most body text)

<code class="language-css">/<em> Body text with optimal line height </em>/
<p>body {</p>
<p>  line-height: 1.5;</p>
<p>}</p>

<p>/<em> Custom line height for headings </em>/</p>
<p>h1 {</p>
<p>  line-height: 1.2;</p>
<p>}</p>

<p>/<em> Using relative units </em>/</p>
<p>.card {</p>
<p>  line-height: 1.4em;</p>
<p>}</code>

Why it matters: Research shows that a line height of 1.5 (for body text) reduces eye fatigue while maintaining sufficient spacing. For short paragraphs, try 1.4em—it creates a gentle rhythm that feels natural to the eye. In print design, line height is often called leading, but in CSS, we use line-height for digital contexts.

Letter Spacing

Letter spacing (or letter-spacing) adjusts the horizontal space between individual characters. This property is subtle but powerful for enhancing legibility, creating visual interest, or improving accessibility.

Common use cases:

Fixing tight text in small fonts
Adding visual weight to headings
Creating stylistic effects (e.g., “slab” fonts)
Improving readability for users with visual impairments

<code class="language-css">/<em> Default letter spacing (0) </em>/
<p>p {</p>
<p>  letter-spacing: 0;</p>
<p>}</p>

<p>/<em> Subtle spacing for readability </em>/</p>
<p>.readable-text {</p>
<p>  letter-spacing: 0.05em;</p>
<p>}</p>

<p>/<em> Bold spacing for emphasis </em>/</p>
<p>.emphasized {</p>
<p>  letter-spacing: 0.2em;</p>
<p>}</code>

Pro tip: For accessibility, a small positive letter spacing (e.g., 0.05em) can help users with dyslexia or low vision. However, excessive spacing (> 0.5em) may reduce readability—always test with real users!

Text Transform

Text transform manipulates the case of text characters. This property is essential for consistency in user interfaces and branding, especially when dealing with titles, headings, or labels that require specific casing.

Key values:

none: No transformation (default)
uppercase: Converts all letters to uppercase
lowercase: Converts all letters to lowercase
capitalize: Capitalizes the first letter of each word
sentence-case: Capitalizes the first letter of sentences (not standard; use capitalize for most cases)

<code class="language-css">/<em> Uppercase for headings </em>/
<p>h1 {</p>
<p>  text-transform: uppercase;</p>
<p>}</p>

<p>/<em> Sentence case for titles </em>/</p>
<p>.title {</p>
<p>  text-transform: capitalize;</p>
<p>}</p>

<p>/<em> Lowercase for subtle effects </em>/</p>
<p>.footer {</p>
<p>  text-transform: lowercase;</p>
<p>}</code>

When to use: Avoid uppercase for body text—it reduces readability. Use capitalize for titles or labels where semantic clarity matters (e.g., “Product Name” vs. “product name”). For accessibility, ensure text transforms don’t create confusion—e.g., uppercase might be harder to read for screen readers.

Text Decoration

Text decoration adds visual effects to text—like underlines, strikethroughs, or custom styles—to enhance usability and aesthetics. This property is crucial for interactive elements and semantic cues.

Common values:

none: Removes all decorations (default)
underline: Adds a line below text
overline: Adds a line above text
line-through: Adds a strike-through
blink: Creates a blinking effect (rarely used for accessibility)

<code class="language-css">/<em> Standard link styling </em>/
<p>a {</p>
<p>  text-decoration: underline;</p>
<p>}</p>

<p>/<em> Custom link with hover effect </em>/</p>
<p>a:hover {</p>
<p>  text-decoration: underline;</p>
<p>  text-decoration-color: #007bff;</p>
<p>}</p>

<p>/<em> Strikethrough for completed tasks </em>/</p>
<p>.completed {</p>
<p>  text-decoration: line-through;</p>
<p>}</p>

<p>/<em> Custom underline for accessibility </em>/</p>
<p>.accessible-link {</p>
<p>  text-decoration: underline;</p>
<p>  text-decoration-color: #333;</p>
<p>}</code>

Accessibility note: Always use text-decoration: none for links that aren’t interactive (e.g., a tags in navigation menus) to avoid accidental clicks. For screen readers, ensure decorative underlines don’t interfere with text flow.

Summary

Mastering these text properties transforms your typography from functional to impactful. Text alignment guides horizontal flow, line height controls vertical breathing space, letter spacing refines character density, text transform standardizes casing, and text decoration adds intentional visual cues. Each property—when applied thoughtfully—contributes to readability, accessibility, and emotional resonance. Start small: experiment with line height for body text, then layer in letter spacing and text transform for polish. Remember, great typography isn’t about rules—it’s about understanding how users experience text. 🌟