33. Letter Spacing and Word Spacing

These properties give precise control over the horizontal gaps between characters and words, dramatically impacting the visual flow of typography.

Letter Spacing (letter-spacing)

Controls the horizontal space between characters (kerning).

• Positive values spread the letters apart.
• Negative values bring the letters closer together (often used slightly for uppercase text).

css /* Spread out for stylistic effect, usually for headings */ h2 { letter-spacing: 3px; }

/* Tighten the kerning slightly for capitalized elements */ .promo-code { text-transform: uppercase; letter-spacing: -0.5px; }

Word Spacing (word-spacing)

Controls the space between entire words.

css /* Increase the gap between words */ .wide-copy { word-spacing: 10px; }

/* Can also use relative units */ p { word-spacing: 0.2rem; }

Note on Readability: Be conservative when adjusting spacing. If the spacing is too large or too tight, it can significantly harm readability, especially for users with dyslexia or reading difficulties.