CSS Bold Hover/Active States – An Alternative

Lots of other places suggestion using text-shadow to handle bold hover/active states. My client had a complaint that it made the text look blurry (which it absolutely does). Here’s my solution (written using general CSS selectors). Let me know what you think!

a:hover,
a.active {
  letter-spacing: -0.15px;
  font-weight: 600;
}

The letter-spacing is not perfect, and there is still a tiny sub-pixel of movement, but it was a compromise between actually-bold text and blurry-bold text. Adjust to your needs.