kerning lost

[alejandromizraji]

Hi, I noticed that kerning is lost when the words are split into characters. is there any way to address that?

Thank you!

[sahejsahni]

I'm noticing this too. Are we doing something wrong?

[lukethacoder]

Kerning should be maintained, but may need to be set again if its not playing nice

<h2 id="get-started" class="words chars splitting" style="--word-total: 3; --char-total: 11" data-scroll="in">
  <span class="word" data-word="Get" style="--word-index: 1">
    <span class="char" data-char="G" style="--char-index: 1">G</span>
    <span class="char" data-char="e" style="--char-index: 2">e</span>
    <span class="char" data-char="t" style="--char-index: 3">t</span>
  </span>
  <span class="whitespace"></span>
  <span class="word" data-word="Started" style="--word-index: 2">
    <span class="char" data-char="S" style="--char-index: 4">S</span>
    <span class="char" data-char="t" style="--char-index: 5">t</span>
    <span class="char" data-char="a" style="--char-index: 6">a</span>
    <span class="char" data-char="r" style="--char-index: 7">r</span>
    <span class="char" data-char="t" style="--char-index: 8">t</span>
    <span class="char" data-char="e" style="--char-index: 9">e</span>
    <span class="char" data-char="d" style="--char-index: 10">d</span>
  </span>
</h2>

above taken from the Splitting docs site. Adjusting the letter-spacing via the browser inspector seems to do the trick.

#get-started {
    letter-spacing: 4px;
}

[qinyiyao]

Adjusting letter spacing didn’t work. The kerning issue is visible in all demos on CodePen, or anywhere, if you use the more problematic letter pairings.

This issue is also observable in GreenSocks SplitText. I guess there’s no way around this other than just use a monospaced font or use word splitting, which still will not deal with the space between words.

https://codepen.io/qinyiyao/pen/mdWyvJX

[MonliH]

Yes, I cannot emphasize how much of a dealbreaker this is! For anyone running into the same problem, I found https://codepen.io/rachsmith/post/how-to-animate-individual-letters-with-the-correct-kerning to be very helpful! It kind of sucks for performance though :(