· css tricks · 2 min read

How I Avoided Shifting Text When Using Bold on Hover


Prevent text from shifting when it turns bold on hover with a simple CSS trick. Improve your navigation menu's UX with this easy fix.

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.

See an example here…

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;

See a full example here…


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.

Back to Blog