Weird text effect!

[Black Mamba]

When you hover over the text, if you pay close attention, you’ll notice that after it scales down it makes a weird ‘adjustment’… for lack of a better word.

It kinda looks like some letters move… or the kerning changes… or the font gets a little thicker… It’s subtle, but you can clearly see something’s happening…

What is it? How do I get rid of it?

Thanks.

http://codepen.io/ZHAA/pen/LNPOzw

[Shikkediel]

My guess is that it’s just optical, caused by opposite contrast.

[Black Mamba]

Do you think so?
I’m pretty sure there’s something really happening.

[bearhead]

I think shikkediel is right that the font appearing bolder is just based on our perception.

The letter moving issue is most apparent in firefox (didn’t see it at all in chrome, ie was pretty ok)

I think it is just a result of how FF renders and scales fonts.

Also, the scaling and transitions are not running in IE or FF (as you have it coded). I noticed that you had a missing semi colon, and I think there is something goofy going on with your prefixes…

[David Schiffner]

You have transform:scale(0.945) as a rule set on .button:hover

When you mouse over the text, the text/button is going to scale because of this.

[Shikkediel]

That’s missing a semicolon after the general rule – so it’s not doing anything with FF. I therefore thought it was about a slightly more subtle effect.

[Black Mamba]

Thanks for your input guys.
I’ve added the missing semicolon.

The text looking bolder was definitely not optical. It’s a rendering issue caused by the browser. Maybe not everybody will notice it or care too much about it, but people with a design background, like me, will spot it.

font-smoothing:antialiased minimizes the issue to a certain extent. It’s still not perfect, but I don’t think there’s much more (or anything else!) that can be done…

That said, some of the letters still move after the scaling is complete. Like there’s a kerning adjustment…

What’s bugging me is that with this text size it’s very easy (at least for me) to see and a definite eyesore!!!

The smaller the text is, the harder it is to notice it… although it still happens! While if I make the text substantially bigger, it no longer happens! Weird, very weird…

David, you were joking, right?
That was definitely not was I was talking about.

[David Schiffner]

I misread the original problem :)

I had first opened it in Chrome and didn’t see what you were talking about. Anyways, now that I understand what the issue is – I still see it in firefox/safari. Nothing in chrome. Very weird issue to say the least.

[Black Mamba]

No worries. It was actually kinda funny. :)

I haven’t tested with other browsers, but it’s very noticeable in Safari.

It might not seem a big deal to some folks, but being the design maniac that I am, this is driving me c-r-a-z-y!!! lol

If anybody knows why this is happening or has any ideia on how to prevent it from happening, I’m all ears.

Thanks

[Author]

Posts