Letter Spacing with Split Text

[Fakebook 2 Likes (Newbie)]

I've noticed that text, when split, will sometimes have wider letter spacing. This seems to happen only when using the type: chars . This is especially noticeable when the split is applied right before or during an animation.

 

Image example (Imgur).

 

In my pen you can see a few differences. I was wondering if there's any way to reduce, or effectively eliminate, this issue. I tried a bit of CSS, but with no success.

See the Pen bGbpbyM by fakebooked (@fakebooked) on CodePen

[PointC 8,599 Likes (Superhero)]

How about this?

 

See the Pen aboNbEm by PointC (@PointC) on CodePen

 

Happy tweening.

 

[elegantseagulls 209 Likes (Specialist)]

Hi @Fakebook

 

The issue is with the way some browsers display fonts.

 

The issue you're talking about was discussed in some pretty good detail here:

Here's a link to my pen with the closest solution:

See the Pen bJpGog by elegantseagulls (@elegantseagulls) on CodePen

 

The CSS you'll need is: font-kerning: none;

[Fakebook 2 Likes (Newbie)]

Thanks! Can confirm that the font-kerning: none; seems to do the trick.

 

Edit: just wanted to mention it works when applied to the parent element (the element being split).

[elegantseagulls 209 Likes (Specialist)]

@PointC - I've lost count at how many times I've gotten the notification that you've posted the solution literally moments before I hit the 'Submit Reply' button!

[PointC 8,599 Likes (Superhero)]

I honed my speed skills back in the day before I was a Mod. I would try to answer faster than Carl, Jonathan, Blake, Diaco and Jack, but would usually lose those speed battles.