🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

LOADING ENGINE...

CSS Word Spacing

Control the rhythm of text. Master Normal, Pixel, Relative, and Negative spacing values.

style.css
h1 {
font-size: 2rem;
word-spacing: 20px;
text-align: center;
}
WIDE SPACING
typography.css
1 / 7
↔️

Tutor:The 'word-spacing' property increases or decreases the whitespace between words. The default value is 'normal'.


Spacing Tree

Unlock nodes by mastering Normal, Pixel, Negative, and Relative spacing values.

Concept 1: Normal Spacing

normal is the default behavior. The browser uses the standard whitespace width defined by the font itself. It usually equates to about 0.25em, but this can vary by font.

System Check

What is the default value of word-spacing?


Community Examples

Share Your Typography

Created a unique headline style using custom word spacing? Share your snippet.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Word Spacing

Author

Pascual Vila

Frontend Instructor.

The word-spacing property is a typography tool in CSS that allows you to specify the amount of whitespace between words and tags. It provides control over the rhythm of the text, improving readability or creating stylistic effects.

Values

  • Normal: The default value. Defines normal spacing between words (usually 0.25em).
  • Length: Defines a fixed space (e.g., 10px, 0.5em, 1cm).
  • Initial: Sets the property to its default value.
  • Inherit: Inherits this property from its parent element.

Length Units

You can use any valid CSS length unit. Using em allows the spacing to scale if the font size changes, which is generally preferred for responsive design. Fixed pixels give you absolute control but less flexibility.

Negative Values

Negative values are allowed and will pull words closer together. Extreme negative values will cause words to overlap, which can be used for creative artistic effects but should be used with caution for readable text.

Word Spacing Glossary

Whitespace
The empty space between characters or words. `word-spacing` specifically modifies the space character (U+0020).
Em Unit
A relative unit based on the current font size of the element. 1em equals the current font size.
Normal Flow
The default layout behavior of elements. Modifying word-spacing changes the horizontal space required by text in the flow.
Typography
The art and technique of arranging type to make written language legible, readable, and appealing.