Letter-spacing (also known as tracking in typography) is a CSS property that controls the horizontal space between individual characters in text. It can accept positive values (increasing space), negative values (decreasing space, making letters tighter), or zero (default). Units can be px, em, rem, or even negative values. For web typography, using em is often recommended as it scales proportionally with font size.

Word-spacing defines the amount of space between words in a block of text. Like letter-spacing, it accepts positive, negative, or zero values. The default is typically 0px (browser default). Increasing word-spacing can improve readability for certain fonts or design styles, while negative values bring words closer together — useful for tight, compact layouts.

For body text (paragraphs), the optimal letter-spacing is generally 0 to 0.5px — very close to the browser default. Excessive letter-spacing in body text reduces readability by disrupting word recognition. However, for headings, all-caps text, or small labels, slightly increased letter-spacing (1–4px) often improves legibility and aesthetic appeal. Studies suggest that for readers with dyslexia, slightly increased letter-spacing (around 0.5–1px) can significantly improve reading speed and comprehension.

Both units work, but em is generally recommended for responsive typography. Since em is relative to the element's font size, letter-spacing defined in em will scale naturally if the font size changes. For example, letter-spacing: 0.05em maintains the same proportional spacing at any font size. Using px is simpler and more predictable for fixed designs, but may require manual adjustment across breakpoints in responsive layouts. Many professional CSS frameworks and design systems prefer em-based letter-spacing.

Yes, negative letter-spacing can create a condensed, modern look often seen in branding, posters, or editorial headlines. However, use it sparingly — values below -2px can cause letters to overlap, severely harming readability. It works best with large, bold display fonts where individual characters remain distinguishable. For body text, avoid negative letter-spacing as it makes reading fatiguing. Always test across devices and screen sizes.

Proper spacing is critical for WCAG accessibility compliance. The Web Content Accessibility Guidelines (WCAG 2.1) recommend that users should be able to override letter-spacing up to 0.12em and word-spacing up to 0.16em without loss of content. For users with dyslexia, slightly increased letter-spacing (0.5–1px) and word-spacing (2–3px) can improve reading fluency. Avoid extremely tight or extremely loose spacing for body text, as both extremes create barriers for readers with visual or cognitive impairments.

For paragraphs, stick close to the default (0–2px). Increasing word-spacing above 4px in body text creates "rivers" of white space that disrupt reading flow. For headings — especially large, bold, or uppercase titles — word-spacing of 4–10px can add a sense of luxury and breathability. All-caps headings particularly benefit from extra word-spacing to help readers distinguish individual words at a glance.

Yes, letter-spacing and word-spacing are universally supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and mobile browsers. They've been part of the CSS specification since CSS1 (1996). There are no known compatibility issues, and they work consistently across operating systems. The only subtle difference is that Safari may render sub-pixel letter-spacing values slightly differently than Chrome or Firefox.

These three properties work together to define the vertical and horizontal rhythm of your typography. When you increase letter-spacing or word-spacing (horizontal expansion), you may want to slightly increase line-height (vertical space) to maintain visual balance. Conversely, tight letter-spacing pairs well with tighter line-height for compact, dense layouts. A good rule of thumb: line-height should be at least 1.5 for body text to ensure sufficient vertical breathing room, regardless of horizontal spacing choices.

Absolutely! Both letter-spacing and word-spacing are animatable CSS properties. You can use transition: letter-spacing 0.3s ease to create smooth hover effects on headings, buttons, or navigation links. Many modern websites use subtle letter-spacing animations on hover to add polish. However, avoid animating these properties on large blocks of body text, as it can be distracting and may impact performance on lower-end devices.