· CSS Tricks · 2 min read
How I Avoided Shifting Text When Using Bold on Hover
Recently I was asked to work on a horizontal navigation that had primary and submenu items. One of the requests was for the text to appear bold on hover. As anyone with experience has seen, doing this can have some bad side effects for the user experience (UX).
The Problem
What can go wrong when causing text to become bold on hover? Quite a bit, actually. When text becomes bold, its font-size essentially changes, albeit slightly. However, with enough text, this creates a VERY noticeable shifting of text across the row you are working in. This can cause other elements to shift around, creating a disorienting experience for users.
Finding The Solution
This solution isn’t one I dreamed up or even knew about beforehand. Instead, I did the smart thing and consulted someone who is an absolute expert at front-end solutions.
I work with a genius named Jacob. He’s an incredible developer—helpful, kind, efficient, and extremely smart. He and one other guy are my go-to experts for front-end conundrums. I’m damned lucky to know him and pick his brain from time to time.
Jacob and I hashed out the solution while standing in the hall. No need to even look at a computer screen. He knew the problem right away and immediately suggested this approach. A little bit of toying around later, and I had a solution.
The Solution
There’s an old trick that’s rarely talked about in web development that can solve this problem, using the CSS text-shadow property to simulate bold text.
It’s very simple: on hover, you add a text-shadow with a horizontal shadow of 1px.
a:hover {
text-shadow: 1px 0 0 currentColor;
}
Conclusion
This is a quick and easy solution that can work with a variety of fonts, helping you avoid problems with shifting text and page elements.