Skip to content

Document percentage letter-spacing and word-spacing values #43356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hamishwillee merged 9 commits into from
Mar 9, 2026
+223 −23
Merged

Document percentage letter-spacing and word-spacing values #43356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
566b524
Document percentage letter-spacing and word-spacing values
chrisdavidmills Mar 6, 2026
4719b75
Merge branch 'main' into letter-spacing-word-spacing-percentages
chrisdavidmills Mar 9, 2026
8829650
Update files/en-us/web/css/reference/properties/letter-spacing/index.md
chrisdavidmills Mar 9, 2026
09563ec
Update files/en-us/web/css/reference/properties/letter-spacing/index.md
chrisdavidmills Mar 9, 2026
4383800
Update files/en-us/web/css/reference/properties/letter-spacing/index.md
chrisdavidmills Mar 9, 2026
9614087
Update files/en-us/web/css/reference/properties/letter-spacing/index.md
chrisdavidmills Mar 9, 2026
32ac38e
Update files/en-us/web/css/reference/properties/letter-spacing/index.md
chrisdavidmills Mar 9, 2026
76ec710
Update files/en-us/web/css/reference/properties/letter-spacing/index.md
chrisdavidmills Mar 9, 2026
08a0bbe
Last few tweaks
chrisdavidmills Mar 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 116 additions & 12 deletions files/en-us/web/css/reference/properties/letter-spacing/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ browser-compat: css.properties.letter-spacing
sidebar: cssref
---

The **`letter-spacing`** [CSS](/en-US/docs/Web/CSS) property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of `letter-spacing` causes characters to spread farther apart, while negative values of `letter-spacing` bring characters closer together.
The **`letter-spacing`** [CSS](/en-US/docs/Web/CSS) property sets the spacing between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of `letter-spacing` spread characters further apart, while negative values of `letter-spacing` bring characters closer together.

{{InteractiveExample("CSS Demo: letter-spacing")}}

Expand All @@ -22,6 +22,10 @@ letter-spacing: 0.2rem;
letter-spacing: 1px;
```

```css interactive-example-choice
letter-spacing: 30%;
```

```css interactive-example-choice
letter-spacing: -1px;
```
Expand Down Expand Up @@ -55,10 +59,11 @@ section {
/* Keyword value */
letter-spacing: normal;

/* <length> values */
/* <length-percentage> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;
letter-spacing: -0.5px;
letter-spacing: 50%;

/* Global values */
letter-spacing: inherit;
Expand All @@ -72,12 +77,14 @@ letter-spacing: unset;

- `normal`
- : The normal letter spacing for the current font. Unlike a value of `0`, this keyword allows the {{glossary("user agent")}} to alter the space between characters in order to justify text.
- {{cssxref("&lt;length&gt;")}}
- : Specifies extra inter-character space _in addition to_ the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.
- {{cssxref("&lt;length-percentage&gt;")}}
- : Specifies extra inter-character space _in addition to_ the default space between characters. While values can be negative, these may be constrained to implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

Percentage values are calculated relative to the width of the space character of the font applied to the text.

## Accessibility

A large positive or negative `letter-spacing` value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.
A large positive or negative `letter-spacing` value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters can overlap each other to the point where the word(s) may be unrecognizable.

Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

Expand All @@ -86,9 +93,20 @@ Legible letter-spacing must be determined on a case-by-case basis, as different

## Internationalization concerns

Some written languages should not have any letter spacing applied. For instance, languages that use the Arabic script expect connected letters to remain visually connected, as in the following example. Applying letter spacing will lead the text to look broken.
Some written languages should not have any letter spacing applied. For instance, languages that use the Arabic script expect connected letters to remain visually connected, as in the following example. Applying letter spacing may lead to the text looking broken.

> <p lang="ar" dir="rtl">شسيبتنمك</p>
```html live-sample___i18n-sample
<p lang="ar" dir="rtl">شسيبتنمك</p>
```

```css hidden live-sample___i18n-sample
p {
font-size: 3em;
margin-inline-start: 5px;
}
```

{{ EmbedLiveSample("i18n-sample", "100%", 180) }}

## Formal definition

Expand All @@ -100,11 +118,15 @@ Some written languages should not have any letter spacing applied. For instance,

## Examples

### Setting letter spacing
### Setting letter-spacing with length values

This example shows several paragraphs with different length `letter-spacing` values set, allowing you to compare them.

#### HTML

```html
The HTML contains several {{htmlelement("p")}} elements containing text content.

```html live-sample___length-letter-spacing
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
Expand All @@ -114,7 +136,9 @@ Some written languages should not have any letter spacing applied. For instance,

#### CSS

```css
Our CSS applies a different `letting-spacing` value to each paragraph.

```css live-sample___length-letter-spacing
.normal {
letter-spacing: normal;
}
Expand All @@ -134,7 +158,87 @@ Some written languages should not have any letter spacing applied. For instance,

#### Result

{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }}
The rendered result looks like this:

{{ EmbedLiveSample("length-letter-spacing", "100%", 200) }}

### Comparing letter-spacing set with length and percentage

This example demonstrates that percentage `letter-spacing` values are useful for responsive text sizing.

The code displays several paragraphs that have the same `letter-spacing` set on text with increasing font size. We provide functionality to switch between a length and a percentage `letter-spacing` value, so that you can observe the responsive qualities of using a percentage value.

#### HTML

The HTML contains several {{htmlelement("p")}} elements containing text content, and an [`<input type="checkbox">`](/en-US/docs/Web/HTML/Reference/Elements/input/checkbox) that we'll use to toggle between a length `letter-spacing` and a percentage `letter-spacing` value.

```html live-sample___percentage-versus-length
<p class="x-small">X-small font-size (0.8em)</p>
<p class="small">Small font-size (1.3em)</p>
<p class="medium">Medium font-size (2em)</p>
<p class="large">Large font-size (3em)</p>
<p class="x-large">X-Large (3.5em)</p>

<form>
<label for="ls-toggle">
Toggle <code>letter-spacing</code> (off: <code>8px</code>, on:
<code>12%</code>)
</label>
<input type="checkbox" id="ls-toggle" />
</form>
```

#### CSS

Our CSS starts by applying increasing {{cssxref("font-size")}} values to each successive paragraph:

```css hidden live-sample___percentage-versus-length
html {
font-family: Arial, Helvetica, sans-serif;
}
```

```css live-sample___percentage-versus-length
.x-small {
font-size: 0.8em;
}

.small {
font-size: 1.3em;
}

.medium {
font-size: 2em;
}

.large {
font-size: 3em;
}

.x-large {
font-size: 3.5em;
}
```

We apply a `letter-spacing` value of `8px` to all paragraphs by default. When the checkbox is checked, however, we change the `letter-spacing` value to `12%`:

```css live-sample___percentage-versus-length
p {
letter-spacing: 8px;
}

p:has(~ form > input:checked) {
letter-spacing: 12%;
}
```

#### Result

The rendered result looks like this:

{{ EmbedLiveSample("percentage-versus-length", "100%", 460) }}

First, note how the initial length letter spacing value looks OK when applied to the larger font sizes, but it doesn't look good on the smaller font sizes. Now toggle the checkbox, and note how the percentage letter spacing looks appropriate on all lines, as it scales with the font size.

## Specifications

Expand Down
118 changes: 107 additions & 11 deletions files/en-us/web/css/reference/properties/word-spacing/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ browser-compat: css.properties.word-spacing
sidebar: cssref
---

The **`word-spacing`** [CSS](/en-US/docs/Web/CSS) property sets the length of space between words and between tags.
The **`word-spacing`** [CSS](/en-US/docs/Web/CSS) property sets the spacing between words and between tags.

{{InteractiveExample("CSS Demo: word-spacing")}}

Expand All @@ -22,6 +22,10 @@ word-spacing: 1rem;
word-spacing: 4px;
```

```css interactive-example-choice
word-spacing: 50%;
```

```css interactive-example-choice
word-spacing: -0.4ch;
```
Expand Down Expand Up @@ -58,6 +62,8 @@ word-spacing: normal;
/* <length> values */
word-spacing: 3px;
word-spacing: 0.3em;
word-spacing: 65%;
word-spacing: -1ex;

/* Global values */
word-spacing: inherit;
Expand All @@ -71,12 +77,12 @@ word-spacing: unset;

- `normal`
- : The normal inter-word spacing, as defined by the current font and/or the browser.
- {{cssxref("length")}}
- : Specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font.
- {{cssxref("length-percentage")}}
- : Specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font. Percentage values are calculated relative to the {{cssxref("font-size")}} of the text.

## Accessibility

A large positive or negative `word-spacing` value will make the sentences the styling is applied to unreadable. For text styled with a very large positive value, the words will be so far apart that it will no longer appear to be a sentence. For text styled with a large negative value, the words will overlap each other to the point where the beginning and end of each word is unrecognizable.
A large positive or negative `word-spacing` value will make the sentences the styling is applied to unreadable. For text styled with a very large positive value, the words will be so far apart that it will no longer appear to be a sentence. For text styled with a large negative value, the words can overlap each other to the point where the beginning and end of each word is unrecognizable.

Legible `word-spacing` must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

Expand All @@ -85,16 +91,24 @@ Legible `word-spacing` must be determined on a case-by-case basis, as different

## Examples

### HTML
### Basic usage

This example demonstrates basic usage of `word-spacing`.

#### HTML

Our HTML contains two paragraphs of text:

```html
<div id="mozdiv1">Lorem ipsum dolor sit amet.</div>
<div id="mozdiv2">Lorem ipsum dolor sit amet.</div>
```html live-sample___basic-usage
<p id="mozdiv1">Lorem ipsum dolor sit amet.</p>
<p id="mozdiv2">Lorem ipsum dolor sit amet.</p>
```

### CSS
#### CSS

```css
Our CSS applies a different `word-spacing` to each paragraph:

```css live-sample___basic-usage
#mozdiv1 {
word-spacing: 15px;
}
Expand All @@ -104,7 +118,89 @@ Legible `word-spacing` must be determined on a case-by-case basis, as different
}
```

{{ EmbedLiveSample('Examples') }}
#### Result

The example renders like so:

{{ EmbedLiveSample("live-sample___basic-usage", "100%", "100") }}

### Comparing word-spacing set with length and percentage

This example demonstrates that percentage `word-spacing` values are useful for responsive text sizing.

The code displays several paragraphs that have the same `word-spacing` set on text with increasing font size. We provide functionality to switch between a length and a percentage `word-spacing` value, so that you can observe the responsive qualities of using a percentage value.

#### HTML

The HTML contains several {{htmlelement("p")}} elements containing text content, and an [`<input type="checkbox">`](/en-US/docs/Web/HTML/Reference/Elements/input/checkbox) that we'll use to toggle between a length `word-spacing` and a percentage `word-spacing` value.

```html live-sample___percentage-versus-length
<p class="x-small">X-small font-size (0.8em)</p>
<p class="small">Small font-size (1.3em)</p>
<p class="medium">Medium font-size (2em)</p>
<p class="large">Large font-size (3em)</p>
<p class="x-large">X-Large (3.5em)</p>

<form>
<label for="ls-toggle">
Toggle <code>word-spacing</code> (off: <code>10px</code>, on:
<code>15%</code>)
</label>
<input type="checkbox" id="ls-toggle" />
</form>
```

#### CSS

Our CSS starts by applying increasing {{cssxref("font-size")}} values to each successive paragraph:

```css hidden live-sample___percentage-versus-length
html {
font-family: Arial, Helvetica, sans-serif;
}
```

```css live-sample___percentage-versus-length
.x-small {
font-size: 0.8em;
}

.small {
font-size: 1.3em;
}

.medium {
font-size: 2em;
}

.large {
font-size: 3em;
}

.x-large {
font-size: 3.5em;
}
```

We apply a `word-spacing` value of `10px` to all paragraphs by default. When the checkbox is checked, however, we change the `word-spacing` value to `15%`:

```css live-sample___percentage-versus-length
p {
word-spacing: 10px;
}

p:has(~ form > input:checked) {
word-spacing: 15%;
}
```

#### Result

The rendered result looks like this:

{{ EmbedLiveSample("percentage-versus-length", "100%", 460) }}

First, note how the initial length letter spacing value looks OK when applied to the larger font sizes, but it doesn't look good on the smaller font sizes. Now toggle the checkbox, and note how the percentage letter spacing looks appropriate on all lines, as it scales with the font size.

## Formal definition

Expand Down