How to stretch CSS grid items proportionally up and down?

I want to display a headline in a way that it

1. fills the full width, applying equal letter spacing between each glyph
2. reduces to the maximum available width, overlapping each glyph equally

My best attempt so far utilizes a CSS grid with grid-template-columns: repeat(auto-fit, minmax(0, max-content)); and justify-content: space-between; like so:

h1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  justify-content: space-between; 
}

<h1>
  <span>W</span><span>i</span><span>l</span><span>d</span><span> </span><span>S</span><span>p</span><span>a</span><span>c</span><span>e</span>
</h1>

While my first requirement is matched in the above solution, when scaling down, adjacent letters with different widths (especially visible with “W” and “i”) will overlap first, before other letters, like so:

Is there any way to force the glyphs to overlap equally/simultaneously (like they would using grid-template-columns: repeat(auto-fit, minmax(0, 1fr));) but while keeping a the initial width of each glyph?