CSS Text Spacing: Letter, Word & Line Spacing Guide

CSS Text Spacing

Text spacing is an important part of web design because the amount of space between letters, words, lines, and paragraphs can significantly affect readability and visual appearance. CSS provides several properties that allow developers to control these spaces and create text that is easier to read and better suited to a particular design.

With CSS text-spacing properties, you can adjust the distance between individual characters, words, and lines. You can also control how text is indented and how white space inside HTML elements is handled.

The main CSS properties related to text spacing include:

• letter-spacing
• word-spacing
• line-height
• text-indent
• white-space

Understanding how these properties work makes it much easier to create clean typography for websites, blogs, documentation pages, landing pages, and applications.

Why Is Text Spacing Important?

Good typography is not only about choosing a beautiful font. The spacing around and within text also determines how comfortable it is to read.

Text with very little spacing can appear crowded, while excessive spacing can make words and sentences difficult to follow. Proper spacing creates visual balance and helps readers move naturally from one line to another.

Text spacing is especially important for:

• Articles and blog posts
• Educational websites
• Documentation
• Navigation menus
• Headings
• Buttons and labels
• Forms
• Mobile interfaces
• Accessibility-focused designs

For example, increasing line height slightly can make a long article much easier to read without changing the font size.

The letter-spacing Property

The letter-spacing property controls the horizontal space between individual characters.

Syntax

selector {
  letter-spacing: value;
}

For example:

p {
  letter-spacing: 1px;
}

This adds extra space between the letters in a paragraph.

Using Negative Letter Spacing

You can also reduce the space between characters by using a negative value.

h2 {
  letter-spacing: -0.5px;
}

Negative spacing can sometimes work well for large headings, but it should be used carefully. Making letters too close together can reduce readability.

Common letter-spacing Values

.title {
  letter-spacing: normal;
}
.heading {
  letter-spacing: 2px;
}
.logo {
  letter-spacing: 4px;
}
.compact {
  letter-spacing: -0.5px;
}

The default value is normal, which allows the browser to determine normal character spacing.

Using Relative Units

You can also use relative units such as em.

h2 {
  letter-spacing: 0.05em;
}

Relative units can be useful when you want spacing to scale naturally with the font size.

When Should You Use letter-spacing?

letter-spacing is commonly used to create a particular visual style.

For example, uppercase navigation links often look cleaner with slightly increased letter spacing:

nav a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

It can also be useful for headings, labels, buttons, logos, and small pieces of interface text.

However, letter spacing should not be increased simply because it looks different. The goal should always be comfortable and understandable typography.

The word-spacing Property

The word-spacing property controls the amount of horizontal space between words.

Syntax

selector {
  word-spacing: value;
}

Example:

p {
  word-spacing: 5px;
}

This increases the space between words.

You can also reduce word spacing:

p {
  word-spacing: -1px;
}

As with letter spacing, excessive negative values can make text difficult to read.

Examples of word-spacing

.normal-text {
  word-spacing: normal;
}
.spaced-text {
  word-spacing: 8px;
}
.compact-text {
  word-spacing: -1px;
}

The normal value uses the browser’s normal word spacing.

letter-spacing vs word-spacing

These two properties are often confused, but they control different things.

letter-spacing changes the distance between characters:

p {
  letter-spacing: 2px;
}

word-spacing changes the distance between words:

p {
  word-spacing: 8px;
}

For example, if you have:

CSS makes websites beautiful

letter-spacing affects the spaces between characters within the words, while word-spacing primarily affects the spaces separating CSS, makes, websites, and beautiful.

The line-height Property

Although line-height is not limited to spacing between words or letters, it is one of the most important properties for controlling text spacing.

It controls the height of a line box and therefore affects the vertical space between lines of text.

Syntax

selector {
  line-height: value;
}

Example:

p {
  line-height: 1.6;
}

This is a common choice for body text because it provides comfortable vertical spacing.

Using Unitless line-height

A unitless value is often a good choice:

body {
  line-height: 1.5;
}

The value is multiplied by the element’s font size.

For example, if the font size is 16px:

16px × 1.5 = 24px

So the computed line height is approximately 24px.

A unitless value also allows the line height to scale naturally when the font size changes.

Using Length Values with line-height

You can specify an explicit length:

p {
  line-height: 24px;
}

You can also use other CSS length units:

p {
  line-height: 1.8rem;
}

However, fixed line-height values can sometimes create problems when font sizes change between different elements.

Using Percentages

Percentages can also be used:

p {
  line-height: 150%;
}

This can provide useful control, although unitless values are often easier to maintain across a design system.

normal Line Height

The default value is:

p {
  line-height: normal;
}

The browser determines an appropriate line height based on the font and other factors.

For content-heavy websites, explicitly choosing a suitable line height often provides more predictable typography.

The text-indent Property

The text-indent property controls the indentation of the first line of a block of text.

Syntax

selector {
  text-indent: value;
}

Example:

p {
  text-indent: 30px;
}

The first line of each paragraph will begin 30 pixels further from the starting edge.

This technique is commonly associated with traditional printed documents and books.

Using Relative Units

You can use em:

p {
  text-indent: 2em;
}

This makes the indentation relative to the element’s font size.

Negative Text Indentation

Negative values are also allowed:

p {
  text-indent: -20px;
}

Negative indentation moves the first line in the opposite direction. This can be useful for specific layouts, although it should not be used without considering overflow and readability.

The white-space Property

The white-space property controls how white space and line breaks inside an element are handled.

It is especially useful when working with formatted text, code examples, labels, and interface elements.

Example

p {
  white-space: normal;
}

Some commonly used values include:

• normal
• nowrap
• pre
• pre-wrap
• pre-line
• break-spaces

white-space: normal

This is the typical default behavior.

p {
  white-space: normal;
}

Multiple spaces in HTML are generally collapsed, and text can wrap onto multiple lines.

white-space: nowrap

This prevents text from wrapping onto a new line.

.menu-item {
  white-space: nowrap;
}

This can be useful for short labels or navigation elements.

However, using nowrap on long text can cause horizontal overflow.

white-space: pre

This preserves spaces and line breaks.

.code {
  white-space: pre;
}

It is useful when displaying preformatted content.

white-space: pre-wrap

This preserves white space while still allowing text to wrap:

.code {
  white-space: pre-wrap;
}

This can be useful for displaying user-entered text or formatted content within a responsive layout.

white-space: pre-line

This preserves line breaks while collapsing sequences of spaces.

.description {
  white-space: pre-line;
}

A Complete Text Spacing Example

Here is a simple example combining several CSS text-spacing properties:

<p class="article-text">
  CSS gives developers precise control over typography and text spacing.
</p>

.article-text {
  font-size: 16px;
  letter-spacing: 0.2px;
  word-spacing: 2px;
  line-height: 1.7;
}

This creates slightly more character and word spacing while providing comfortable vertical space between lines.

Text Spacing for Headings

Headings often require different spacing from body text.

For example:

h2 {
  letter-spacing: -0.02em;
  line-height: 1.2;
}

A slightly tighter line height can work well for large headings because their larger font size already creates substantial visual height.

However, headings should still remain easy to read, particularly on smaller screens.

Text Spacing for Paragraphs

Paragraphs generally benefit from comfortable line spacing.

p {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

The exact values depend on the font family, font size, content width, and overall design.

Text Spacing in Navigation Menus

Navigation menus often use uppercase text with additional character spacing:

.nav-link {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

This can create a clean and structured appearance.

Be careful not to add too much spacing because navigation labels should remain recognizable at a glance.

Text Spacing in Buttons

Buttons can also benefit from controlled spacing:

.button {
  letter-spacing: 0.03em;
  line-height: 1.2;
}

For buttons with short labels, modest letter spacing can improve their visual appearance.

Text Spacing and Responsive Design

Text spacing should be tested across different screen sizes.

A spacing value that looks good on a desktop monitor may not work as well on a small smartphone.

For example:

.heading {
  font-size: 2rem;
  letter-spacing: -0.02em;
}
@media (max-width: 600px) {
  .heading {
    font-size: 1.6rem;
    letter-spacing: -0.01em;
  }
}

Responsive typography should prioritize readability rather than simply maintaining the same spacing values everywhere.

Text Spacing and Readability

Readable typography requires balance.

If letters are too close together, individual characters can visually merge. If they are too far apart, words lose their natural shape.

The same principle applies to word spacing. Excessive word spacing can make a paragraph look fragmented.

Line height is particularly important for long-form content. A line height that is too small creates a dense block of text, while excessive line height can make related lines feel disconnected.

Text Spacing and Accessibility

Typography choices can directly affect accessibility.

Users with visual or reading difficulties may benefit from increased spacing. Websites should therefore avoid designs that depend on extremely tight typography.

When adjusting text spacing, consider:

• Character recognition
• Word separation
• Line readability
• Text wrapping
• Zoom behavior
• Mobile screen sizes
• User-defined browser settings

Do not use CSS spacing to make important content intentionally difficult to read or to prevent users from adjusting the presentation of text.

Avoid Excessive Letter Spacing

One of the most common mistakes is using large letter-spacing values simply for visual effect.

For example:

p {
  letter-spacing: 8px;
}

This is generally unsuitable for normal paragraphs.

Large spacing may be appropriate for certain decorative headings or logos, but body text usually requires much more restrained values.

Avoid Excessive Word Spacing

The same applies to word-spacing.

p {
  word-spacing: 20px;
}

Such a value can make a sentence appear visually disconnected.

Use word spacing to make small adjustments rather than dramatically separating every word.

Avoid Fixed Line Heights When They Cause Clipping

This can create problems:

p {
  font-size: 20px;
  line-height: 20px;
}

When the line height is equal to the font size, glyphs or other font characteristics may have insufficient vertical room depending on the font and rendering environment.

A more flexible approach is:

p {
  font-size: 20px;
  line-height: 1.5;
}

Using CSS Variables for Text Spacing

CSS custom properties can make typography easier to maintain.

:root {
  --body-line-height: 1.6;
  --body-letter-spacing: 0.01em;
  --body-word-spacing: 0.02em;
}
body {
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  word-spacing: var(--body-word-spacing);
}

This approach is particularly useful for larger websites and design systems.

Creating a Reusable Typography System

Instead of manually choosing different spacing values for every element, you can define a consistent typography system.

body {
  font-size: 1rem;
  line-height: 1.6;
}
h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
}
nav a,
.button {
  letter-spacing: 0.04em;
}

This creates a consistent relationship between headings, body text, navigation, and interactive elements.

Text Spacing with Different Fonts

Text spacing depends heavily on the font.

Two fonts at the same font size can have noticeably different character widths and visual density.

For example:

body {
  font-family: Arial, sans-serif;
  letter-spacing: 0.01em;
}

Changing the font may require you to reevaluate the spacing.

This is one reason typography should be tested using the actual font used by the website.

CSS Text Spacing Units

Several units can be used for spacing-related properties.

Pixels

p {
  letter-spacing: 1px;
}

Pixels provide direct and predictable control.

em

p {
  letter-spacing: 0.02em;
}

em scales according to the element’s font size and can be useful for typography.

rem

p {
  word-spacing: 0.1rem;
}

rem is based on the root element’s font size.

For responsive typography, relative units are often preferable to large collections of fixed pixel values.

Common Mistakes in CSS Text Spacing

Several mistakes can reduce the quality of a website’s typography.

Applying the Same Spacing Everywhere

Headings, paragraphs, navigation links, buttons, and labels have different typography requirements.

A single spacing rule for everything can produce poor results.

Using Too Much Letter Spacing

Large values may make text look decorative but reduce readability.

Using Extremely Tight Line Height

Very small line heights can cause lines to overlap or become difficult to follow.

Ignoring Mobile Devices

Always inspect spacing at different viewport widths.

Forgetting Long Words

A combination of spacing, large fonts, and narrow containers can produce unexpected wrapping.

Using white-space: nowrap Without a Reason

Preventing wrapping can cause content to extend outside its container.

Best Practices for CSS Text Spacing

For high-quality typography, keep the following practices in mind:

1. Use letter-spacing for character-level spacing.
2. Use word-spacing for spacing between words.
3. Use line-height to control vertical text rhythm.
4. Use text-indent when first-line indentation is actually needed.
5. Use white-space when you need control over wrapping and preserved spaces.
6. Prefer relative units for scalable typography where appropriate.
7. Avoid extreme spacing values.
8. Test text on both desktop and mobile screens.
9. Consider the actual font being used.
10. Prioritize readability over decorative effects.
11. Check headings and body text separately.
12. Test content with longer words and longer paragraphs.
13. Consider accessibility when choosing spacing.
14. Keep typography consistent across the website.
15. Use CSS custom properties when managing a larger design system.

Practical CSS Text Spacing Example

The following example demonstrates a simple article typography system:

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
h2 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.75em;
}
p {
  letter-spacing: 0.01em;
  word-spacing: 0.02em;
  margin-bottom: 1em;
}
.article-intro {
  text-indent: 0;
}
.navigation a {
  letter-spacing: 0.05em;
  white-space: nowrap;
}

This approach creates a clear visual hierarchy while keeping the spacing relatively subtle.

CSS Text Spacing vs Text Alignment

Text spacing should not be confused with text alignment.

For example:

p {
  text-align: center;
}

controls horizontal alignment of the text within its container.

By contrast:

p {
  letter-spacing: 1px;
}

changes the spacing between characters.

Similarly:

p {
  word-spacing: 4px;
}

changes the spacing between words.

These properties can be used together, but they perform different jobs.

CSS Text Spacing vs Margins and Padding

Margins and padding control the space around an element, while text-spacing properties control aspects of the text itself.

For example:

p {
  margin-bottom: 20px;
}

controls the space outside the paragraph.

p {
  line-height: 1.6;
}

controls the vertical rhythm of lines inside the paragraph.

And:

p {
  letter-spacing: 1px;
}

controls character spacing.

Understanding this difference helps prevent unnecessary CSS.

A Simple Way to Remember Text Spacing Properties

A useful way to remember the main properties is:

• letter-spacing → space between letters
• word-spacing → space between words
• line-height → vertical space between lines
• text-indent → space before the first line
• white-space → how spaces and line wrapping are handled

Once these differences are clear, most basic CSS text-spacing requirements become straightforward.

Conclusion

CSS text spacing gives developers detailed control over how text looks and behaves on a webpage. The most important properties are letter-spacing, word-spacing, line-height, text-indent, and white-space.

letter-spacing controls the distance between characters, while word-spacing adjusts the space between words. line-height controls the vertical rhythm of text, text-indent controls first-line indentation, and white-space determines how spaces and line breaks are treated.

The best text spacing is usually subtle. Instead of using dramatic values, make small adjustments and evaluate the result using the actual font, content, and screen sizes used by your website.

Good spacing should support the reader rather than distract them. When typography, spacing, font size, line length, and responsive behavior work together, the result is a website that feels cleaner, more professional, and much easier to read.