CSS 8 💻 text-align, letter-spacing, word-spacing and text-transform - KandZ

These CSS properties control the alignment, spacing, and case transformation of text, helping you create visually appealing and well-structured content.

Overview of Properties

Property	Description	Common Values
`text-align`	Aligns text horizontally within its parent	`left`, `center`, `right`, `justify`
`letter-spacing`	Sets space between characters	`normal`, `2px`, `0.1em`
`word-spacing`	Sets space between words	`normal`, `4px`, `0.2em`
`text-transform`	Transforms text case	`none`, `uppercase`, `lowercase`, `capitalize`

1. text-align

The text-align property specifies how text is aligned horizontally within its parent element.

/* Left-aligned */
div.left-aligned {
    text-align: left;
}

/* Center-aligned */
div.center-aligned {
    text-align: center;
}

/* Right-aligned */
div.right-aligned {
    text-align: right;
}

/* Justified (spread across the line) */
div.justified {
    text-align: justify;
}

Values

Value	Description	Example
`left`	Aligns text to the left (default for LTR languages)	`text-align: left;`
`center`	Centers text	`text-align: center;`
`right`	Aligns text to the right	`text-align: right;`
`justify`	Spreads text across the full line width	`text-align: justify;`
`start`	Aligns to the start of the text direction	`text-align: start;`
`end`	Aligns to the end of the text direction	`text-align: end;`

2. letter-spacing

The letter-spacing property sets the space between characters in a text.

/* Normal spacing (default) */
p.normal-spacing {
    letter-spacing: normal;
}

/* Expanded spacing */
p.expanded-spacing {
    letter-spacing: 2px;
}

/* Tight spacing */
p.tight-spacing {
    letter-spacing: -1px;
}

/* Relative spacing */
p.relative-spacing {
    letter-spacing: 0.1em;
}

Values

Value	Description	Example
`normal`	Default spacing (browser default)	`letter-spacing: normal;`
`length`	Fixed or relative spacing	`letter-spacing: 2px;`
`negative`	Tighter spacing	`letter-spacing: -1px;`

3. word-spacing

The word-spacing property sets the space between words in a text.

/* Normal spacing (default) */
p.normal-spacing {
    word-spacing: normal;
}

/* Expanded spacing */
p.expanded-spacing {
    word-spacing: 4px;
}

/* Relative spacing */
p.relative-spacing {
    word-spacing: 0.2em;
}

Values

Value	Description	Example
`normal`	Default spacing (browser default)	`word-spacing: normal;`
`length`	Fixed or relative spacing	`word-spacing: 4px;`

4. text-transform

The text-transform property changes the case of text.

/* All uppercase */
p.uppercase {
    text-transform: uppercase;
}

/* All lowercase */
p.lowercase {
    text-transform: lowercase;
}

/* Capitalize first letter of each word */
p.capitalize {
    text-transform: capitalize;
}

/* Original case (default) */
p.none {
    text-transform: none;
}

Values

Value	Description	Example
`none`	Original case (default)	`text-transform: none;`
`uppercase`	All letters in uppercase	`text-transform: uppercase;`
`lowercase`	All letters in lowercase	`text-transform: lowercase;`
`capitalize`	First letter of each word capitalized	`text-transform: capitalize;`

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-align, letter-spacing, word-spacing, text-transform</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .demo-box {
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border: 2px solid #ddd;
            background: #f8f9fa;
        }

        .demo-box.bordered {
            border: 2px solid #ddd;
            width: 70%;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* ====== TEXT ALIGN DEMOS ====== */
        .ta-left {
            text-align: left;
        }

        .ta-center {
            text-align: center;
        }

        .ta-right {
            text-align: right;
        }

        .ta-justify {
            text-align: justify;
        }

        /* ====== LETTER SPACING DEMOS ====== */
        .ls-normal {
            letter-spacing: normal;
        }

        .ls-expanded {
            letter-spacing: 2px;
        }

        .ls-tight {
            letter-spacing: -1px;
        }

        .ls-wide {
            letter-spacing: 4px;
        }

        /* ====== WORD SPACING DEMOS ====== */
        .ws-normal {
            word-spacing: normal;
        }

        .ws-expanded {
            word-spacing: 4px;
        }

        .ws-wide {
            word-spacing: 8px;
        }

        /* ====== TEXT TRANSFORM DEMOS ====== */
        .tt-uppercase {
            text-transform: uppercase;
        }

        .tt-lowercase {
            text-transform: lowercase;
        }

        .tt-capitalize {
            text-transform: capitalize;
        }
    </style>
</head>
<body>

    <h1>text-align, letter-spacing, word-spacing, text-transform</h1>

    <!-- ====== 1. TEXT ALIGN ====== -->
    <section>
        <h2>1. text-align</h2>

        <div class="demo-box bordered ta-left">
            <strong>text-align: left</strong><br>
            This text is left-aligned within the div.
        </div>

        <div class="demo-box bordered ta-center" style="width: 70%; margin: 10px auto;">
            <strong>text-align: center</strong><br>
            This text is centered within the div.
        </div>

        <div class="demo-box bordered ta-right">
            <strong>text-align: right</strong><br>
            This text is right-aligned within the div.
        </div>

        <div class="demo-box bordered ta-justify">
            <strong>text-align: justify</strong><br>
            This text is justified — it is spread across the full line width. The browser adds extra space between words so that both the left and right edges of the text align with the container's edges.
        </div>

        <div class="code-block">
            text-align: left;    /* Aligns text to the left (default) */
            text-align: center;  /* Centers text */
            text-align: right;   /* Aligns text to the right */
            text-align: justify; /* Spreads text across the full line */
        </div>
    </section>

    <!-- ====== 2. LETTER SPACING ====== -->
    <section>
        <h2>2. letter-spacing</h2>

        <div class="grid-2">
            <div class="demo-box ls-normal">
                <strong>letter-spacing: normal</strong><br>
                This text has normal letter spacing.
            </div>

            <div class="demo-box ls-expanded">
                <strong>letter-spacing: 2px</strong><br>
                This text has expanded letter spacing.
            </div>

            <div class="demo-box ls-wide">
                <strong>letter-spacing: 4px</strong><br>
                This text has wide letter spacing.
            </div>

            <div class="demo-box ls-tight">
                <strong>letter-spacing: -1px</strong><br>
                This text has tight letter spacing.
            </div>
        </div>

        <div class="code-block">
            letter-spacing: normal;  /* Default */
            letter-spacing: 2px;     /* Expanded spacing */
            letter-spacing: 4px;     /* Wide spacing */
            letter-spacing: -1px;    /* Tight spacing */
        </div>
    </section>

    <!-- ====== 3. WORD SPACING ====== -->
    <section>
        <h2>3. word-spacing</h2>

        <div class="grid-2">
            <div class="demo-box ws-normal">
                <strong>word-spacing: normal</strong><br>
                This text has normal word spacing between words.
            </div>

            <div class="demo-box ws-expanded">
                <strong>word-spacing: 4px</strong><br>
                This text has expanded word spacing between words.
            </div>

            <div class="demo-box ws-wide">
                <strong>word-spacing: 8px</strong><br>
                This text has wide word spacing between words.
            </div>
        </div>

        <div class="code-block">
            word-spacing: normal;  /* Default */
            word-spacing: 4px;     /* Expanded word spacing */
            word-spacing: 8px;     /* Wide word spacing */
        </div>
    </section>

    <!-- ====== 4. TEXT TRANSFORM ====== -->
    <section>
        <h2>4. text-transform</h2>

        <div class="grid-2">
            <div class="demo-box tt-uppercase">
                <strong>text-transform: uppercase</strong><br>
                This text is in uppercase.
            </div>

            <div class="demo-box tt-lowercase">
                <strong>text-transform: lowercase</strong><br>
                THIS TEXT IS IN LOWERCASE.
            </div>

            <div class="demo-box tt-capitalize">
                <strong>text-transform: capitalize</strong><br>
                this text is capitalized. (first letter of each word)
            </div>

            <div class="demo-box" style="text-transform: none;">
                <strong>text-transform: none</strong><br>
                This text retains its original case.
            </div>
        </div>

        <div class="code-block">
            text-transform: uppercase;  /* ALL CAPS */
            text-transform: lowercase;  /* all lowercase */
            text-transform: capitalize; /* First Letter Of Each Word Capitalized */
            text-transform: none;       /* Original case (default) */
        </div>
    </section>

    <!-- ====== 5. COMBINED EXAMPLES ====== -->
    <section>
        <h2>5. Combined Examples</h2>

        <div class="demo-box" style="text-align: center; letter-spacing: 2px; text-transform: uppercase; color: #007bff;">
            <strong>Combined: center + letter-spacing: 2px + uppercase</strong><br>
            This text is centered, has expanded letter spacing, and is in uppercase.
        </div>

        <div class="demo-box" style="text-align: justify; word-spacing: 6px; letter-spacing: 0.5px; text-transform: capitalize;">
            <strong>Combined: justify + word-spacing: 6px + capitalize</strong><br>
            this text is justified, has wide word spacing, and each word is capitalized.
        </div>

        <div class="demo-box" style="text-align: right; letter-spacing: -0.5px; word-spacing: 2px; text-transform: lowercase; color: #28a745;">
            <strong>Combined: right + tight letter-spacing + lowercase</strong><br>
            THIS TEXT IS RIGHT-ALIGNED, HAS TIGHT LETTER SPACING, AND IS IN LOWERCASE.
        </div>
    </section>

    <!-- ====== REFERENCE TABLES ====== -->
    <section>
        <h2>6. Reference Tables</h2>

        <h3>text-align Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>left</code></td>
                <td>Aligns text to the left (default for LTR languages)</td>
                <td><code>text-align: left;</code></td>
            </tr>
            <tr>
                <td><code>center</code></td>
                <td>Centers text</td>
                <td><code>text-align: center;</code></td>
            </tr>
            <tr>
                <td><code>right</code></td>
                <td>Aligns text to the right</td>
                <td><code>text-align: right;</code></td>
            </tr>
            <tr>
                <td><code>justify</code></td>
                <td>Spreads text across the full line</td>
                <td><code>text-align: justify;</code></td>
            </tr>
            <tr>
                <td><code>start</code></td>
                <td>Aligns to the start of the text direction</td>
                <td><code>text-align: start;</code></td>
            </tr>
            <tr>
                <td><code>end</code></td>
                <td>Aligns to the end of the text direction</td>
                <td><code>text-align: end;</code></td>
            </tr>
        </table>

        <h3>letter-spacing Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>normal</code></td>
                <td>Default spacing</td>
                <td><code>letter-spacing: normal;</code></td>
            </tr>
            <tr>
                <td><code>length</code></td>
                <td>Fixed spacing (px, em, etc.)</td>
                <td><code>letter-spacing: 2px;</code></td>
            </tr>
            <tr>
                <td><code>negative</code></td>
                <td>Tighter spacing</td>
                <td><code>letter-spacing: -1px;</code></td>
            </tr>
        </table>

        <h3>word-spacing Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>normal</code></td>
                <td>Default spacing</td>
                <td><code>word-spacing: normal;</code></td>
            </tr>
            <tr>
                <td><code>length</code></td>
                <td>Fixed spacing (px, em, etc.)</td>
                <td><code>word-spacing: 4px;</code></td>
            </tr>
        </table>

        <h3>text-transform Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>Original case (default)</td>
                <td><code>text-transform: none;</code></td>
            </tr>
            <tr>
                <td><code>uppercase</code></td>
                <td>All letters in uppercase</td>
                <td><code>text-transform: uppercase;</code></td>
            </tr>
            <tr>
                <td><code>lowercase</code></td>
                <td>All letters in lowercase</td>
                <td><code>text-transform: lowercase;</code></td>
            </tr>
            <tr>
                <td><code>capitalize</code></td>
                <td>First letter of each word capitalized</td>
                <td><code>text-transform: capitalize;</code></td>
            </tr>
        </table>
    </section>

</body>
</html>

Quick Reference

Property	Description	Common Values
`text-align`	Aligns text horizontally	`left`, `center`, `right`, `justify`
`letter-spacing`	Space between characters	`normal`, `2px`, `-1px`
`word-spacing`	Space between words	`normal`, `4px`
`text-transform`	Transforms text case	`none`, `uppercase`, `lowercase`, `capitalize`

Best Practices

✅ Do This:

/* Use justify for large text blocks */
.article {
    text-align: justify;
}

/* Use center for headings and short text */
h1 { text-align: center; }

/* Use letter-spacing for headings */
h1 { letter-spacing: 2px; }

/* Use uppercase for emphasis */
.important { text-transform: uppercase; }

❌ Don’t Do This:

/* Don't center large blocks of text */
.long-text { text-align: center; }  /* Hard to read */

/* Don't use excessive letter-spacing */
p { letter-spacing: 5px; }  /* Makes text hard to read */

/* Don't use uppercase for long text */
.long-text { text-transform: uppercase; }  /* Hard to read */

Pro Tip: Use text-align: justify for long articles and columns to create clean edges, but be mindful that it can create awkward gaps. For headings, use letter-spacing to give them a more refined look. Use text-transform sparingly — uppercase is great for buttons and headings, but hard to read in long paragraphs!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Overview of Properties

1. text-align

Values

2. letter-spacing

Values

3. word-spacing

Values

4. text-transform

Values

Complete Example

Quick Reference

Best Practices

Ads Blocker Detected!!!