Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Fakebook

Letter Spacing with Split Text

Recommended Posts

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

Link to comment
Share on other sites

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;

  • Like 5
Link to comment
Share on other sites

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).

Link to comment
Share on other sites

@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!

  • Haha 3
Link to comment
Share on other sites

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. :D

  • Haha 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×