Letter spacing in CSS changes word spacing?

Question

I've observed that when I adjust the letter spacing in CSS, the word spacing seems to change automatically. However, after extensive research, I couldn't find concrete information on this relationship.

Background: I consulted various resources, including ChatGPT 4.0, and the consensus appears that letter and word spacing are independent properties. I've tested this behavior across multiple fonts and browsers and consistently noticed the change.

This behavior differs from vector-based graphic design software like CorelDRAW, where adjusting letter spacing doesn't impact word spacing. I like the browser's approach and feel it produced an authentically pleasing result. It perfectly reduces the word spacing as letter spacing decreases.

Question: Is this word spacing adjustment in browsers when letter spacing is modified a recognized phenomenon? Chat GBT says it shouldn't happen, and they're independent properties. One does not change the other. I can't find any information online about this topic.

I have validated it across different fonts and browsers. The decrease or increase in word spacing is proportionate to letter spacing and is the same regardless of font.

<!DOCTYPE html>
<html>
<head>
<style>
h1{
  letter-spacing: 20px;
  font-size: 20px;
}

h2 {
  letter-spacing: 10px;
  font-size: 20px;
}

h3 {
  letter-spacing: 5px;
  font-size: 20px;
}
span {
  border-style: solid;
}
</style>
</head>
<body>

<h1><span>This</span> <span>is</span> <span>heading</span> <span>1</span></h1>
<h2><span>This</span> <span>is</span> <span>heading</span> <span>2</span></h2>
<h3><span>This</span> <span>is</span> <span>heading</span> <span>3</span></h3>

</body>
</html>

The white space might be considered a letter and thus the letter spacing is also applied to it? — Geshode, Aug 21 '23 at 07:54
I believe letter spacing is the distance between letters. Word spacing is the distance between words. Each is an independent property, and one does not affect the other. This is how all other graphic design software works. If that was really the case, I would see the behaviour elsewhere. — Jack Trowbridge, Aug 21 '23 at 07:59
Suggestion: add a border around your words so you can clearly delineate the words and white spaces. — fat penguin, Aug 21 '23 at 08:01
"I believe letter spacing is the distance between letters." Approximately yes, but more precisely [the additional spacing (commonly called tracking ) between adjacent typographic character units](https://drafts.csswg.org/css-text/#letter-spacing-property). The definition of a typographic character units is very complicated because it accounts for many different languages and writing systems, but in short, in English it includes the space character. — Alohci, Aug 21 '23 at 08:11
I've done that and updated the code to include boxes around the characters. We see the word spacing increase and the most likely answer is the fact the space is also a character. I don't see this behaviour in CorelDRAW which is why I was confused. — Jack Trowbridge, Aug 21 '23 at 08:18

myf · Accepted Answer · 2023-08-30T17:39:31.567

Sample showing individual glyph rectangles:

// "lettering"
document.querySelectorAll('div > *').forEach(
 h => h.innerHTML = [...h.innerHTML].map(c => `<span data-char="${c}">${c}</span>`).join('')
 );

// append computed width
document.querySelectorAll('span').forEach(
 s => s.insertAdjacentHTML('beforeend', `<samp>${s.getBoundingClientRect().width}</samp>`)
);

div > * {
 margin-top: 0;
 line-height: 2;
}
div span {
 border-top: 1rem solid #000;
 position: relative;
}
div span:nth-child(even) {
  border-top-color: #999;
}
samp {
  position: absolute;
  bottom: 100%;
  left: 0;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1rem;
  background-color: #000;
  z-index: 1;
}
div span:nth-child(even) samp {
  color: black;
  background-color: #9996;
}

div:not(:hover) span:not([data-char=" "]) samp {
 opacity: 0;
 z-index: 0;
}

div:hover span:not(:hover) samp {
  opacity: 0;
}
html {
  background-color: #333;
  color: #ccc;
}
body:hover span:not(:hover) {
 opacity: .1;
}

<div>
  <p style="font-size: 20px;
            letter-spacing: 20px;"
  >20px font 20px spacing</p>
  <p style="font-size: 20px;
            letter-spacing: 10px;"
  >20px font 10px spacing</p>
  <p style="font-size: 20px;
            letter-spacing: 5px;"
  >20px font 5px spacing</p>
  <p style="font-size: 20px;
            letter-spacing: 0px;"
  >20px font 0px spacing</p>
  <p style="font-size: 12px;
            letter-spacing: 12px;"
  >12 px font 12 px spacing</p>
  <p style="font-size: 12px;
            letter-spacing: 0px;"
  >12px font 0px spacing</p>
</div>

For me renders:

This shows that intrinsic "space" width for 20px is 5px and letter-spacing (20, 10, 5 and 0 px) is simply added to it, producing 25 15 10 and 5 pixels wide glyphs. Same applies for example for the zero digit that is 10px wide and with added letter-spacing gets widths 30, 20, 15 and 10 respectively.

It makes sense, because if letter-spacing was only added to non-white-space glyphs, you'd have to remember to adjust word-spacing all the times you touch it: for example for letter-spacing: 10px; font-size: 20px; you'd get gaps between glyphs twice as wide as gaps between words, in this hypothetical case, what presumably is not what you'd expect.

Letter spacing in CSS changes word spacing?

1 Answers1