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

Share this post


Link to post
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

Share this post


Link to post
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).

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×