Letter spacing and word spacing properties allow you to control the spacing between characters and between words. These properties improve readability and can enhance the visual appearance of your text. Adjusting spacing helps create a comfortable balance and style in your typography.

Syntax

Follow the code block below to set letter spacing and word spacing in CSS:

/* Set letter spacing */
letter-spacing: normal | length; /* e.g., letter-spacing: 2px; */

/* Set word spacing */
word-spacing: normal | length;   /* e.g., word-spacing: 4px; */

Explanation:

• letter-spacing:
  • Adds space between each character in the text.
  • The value can be set to normal (default spacing) or a specific length such as 2px.
• word-spacing:
  • Adds space between words.
  • The value can be normal or a length like 4px.

Example 1: Increased Letter Spacing

In this example, we apply increased letter spacing to a paragraph to create a more open and spacious look for the text.

Explanation:

• Letter Spacing:
  • The property letter-spacing: 2px adds 2 pixels of space between each character.
• Outcome:
  • The text appears more airy and is easier to read.

This lesson shows you how to adjust both letter spacing and word spacing. By using these properties, you can tailor the appearance of your text to enhance its readability and overall style on your web pages.