CSS Word-spacing

The word-spacing property in CSS controls the space between words in a block of text. It allows you to adjust the amount of space between words, which can improve the readability or stylistic appearance of the text.

Syntax

element {
    word-spacing: length | normal | initial | inherit;
}

Try It Now

Property Values

  • length:
    • Specifies the exact space between words using a length unit (e.g., px, em, rem, etc.).
    • Example: word-spacing: 10px;
  • normal:
    • Sets the default spacing between words. The exact value depends on the browser and font used.
    • Example: word-spacing: normal;
  • initial:
    • Resets the word-spacing property to its default value (normal).
    • Example: word-spacing: initial;
  • inherit:
    • Inherits the word-spacing value from its parent element.
    • Example: word-spacing: inherit;

Examples

Example 1: Increasing Word Spacing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .wide-spacing {
            word-spacing: 15px;
        }
    </style>
</head>
<body>
    <p class="wide-spacing">This is a paragraph with increased word spacing.</p>
</body>
</html>

Try It Now

Example 2: Reducing Word Spacing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .narrow-spacing {
            word-spacing: -5px;
        }
    </style>
</head>
<body>
    <p class="narrow-spacing">This is a paragraph with reduced word spacing.</p>
</body>
</html>

Try It Now

Example 3: Inheriting Word Spacing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .parent {
            word-spacing: 20px;
        }
        .child {
            word-spacing: inherit;
        }
    </style>
</head>
<body>
    <div class="parent">
        <p class="child">This paragraph inherits the word spacing from its parent.</p>
    </div>
</body>
</html>

Try It Now

Use Cases

  • Improving Readability: Adjusting word spacing can enhance the readability of text, particularly in large blocks of text or on screens with varying resolutions.
  • Styling: Custom word spacing can be used for stylistic purposes in headings or display text to create a distinct visual effect.
  • Aligning Text: In some cases, adjusting word spacing can help align text in designs where precise control over layout is required.

Considerations

  • Negative Spacing: Be cautious when using negative values for word-spacing as it can make text harder to read if the words are too close together.
  • Font and Browser Differences: The default normal spacing can vary depending on the font and browser, so adjustments may need to be tested across different environments to ensure consistency.

Summary

The word-spacing property is a simple yet powerful tool for adjusting the space between words in text content. It can be used to improve readability, enhance the design of text elements, and ensure that text layout meets specific design requirements. By understanding how to apply and combine word-spacing with other CSS properties, you can create more visually appealing and functional web designs.