CSS text-autospace Property

The text-autospace property controls the automatic adjustment of spacing around characters in scripts that have mixed full-width and half-width glyphs — most commonly East Asian (CJK) text mixed with Latin letters, numbers, or punctuation. Its purpose is typographic: to reduce awkward gaps or collisions that occur when characters of differing widths meet, by adapting inter-character spacing so the text reads more evenly and appears visually balanced. This is particularly important for multi-script content where default spacing rules can leave large white spaces around punctuation or cause punctuation to crowd adjacent ideographs.

On a practical level, using text-autospace influences how line breaks and justification look because it subtly changes spacing relationships inside runs of text. It therefore interacts with other spacing-related CSS properties — for instance letter-spacing and word-spacing — and should be considered when you are fine-tuning typographic rhythm. When combined with alignment or justification rules (see text-align), automatic adjustment can affect visual ragging and the optical center of a block, so designers often adjust these properties together to achieve the desired outcome.

From a design and accessibility standpoint, text-autospace is a tool for improving readability in localized or multilingual interfaces. It can make sentences with mixed scripts feel more natural and reduce the cognitive load for readers of East Asian languages. However, because it alters spacing at a character level, it should be used consistently across comparable elements (headings, body text, captions) to avoid uneven visual weight. Also consider font choice and metrics — some fonts already include well-designed CJK spacing, and excessive automatic adjustment may conflict with a typeface’s intended proportions.

In workflow terms, adopt text-autospace when you encounter visible spacing problems in mixed-script content and test its effect across typical line lengths and sizes. For tightly controlled typographic layouts (for example, print-like pages or UI components where exact spacing is critical), use it in combination with other typographic properties and preview with representative content; for more fluid interfaces, it can often be left to the browser’s automatic handling as a readability enhancement. Finally, remember that typographic tuning is iterative: small adjustments, careful comparisons, and user testing will help determine whether text-autospace improves the reading experience for your audience.