Using text-shadow instead of font-weight bold to avoid jumping

When using font-weight: bold for :hover states on links the width of the element changes as the character width gets increased. This can result in a jump effect as shown in this example.

Workaround #
a:hover { text-shadow: 1px 0 0 currentColor;}
To p…

When using font-weight: bold for :hover states on links the width of the element changes as the character width gets increased. This can result in a jump effect as shown in this example.

Screencast showing hovering of a link with font-weight set to bold and the workaround using text-shadow

Workaround

a:hover {
text-shadow: 1px 0 0 currentColor;
}

To prevent the jump effect we can use text-shadow to fake font-weight: bold. Browser support for text-shadow is good for most browsers, except in Internet Explorer where it isn’t supported prior to Version 10. As you want to define :hover states for older IE versions as well you may use conditional comments:

Conditional comments

<!--[if lt IE 9]> <html class="old-ie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="old-ie" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
a:hover {
text-shadow: 1px 0 0 currentColor;
}

.old-ie a:hover {
font-weight: bold;
}

Example using conditional comments.

CSS Feature Queries

Or you could use @supports to target only browsers which support CSS Feature Queries and text-shadow:

a:hover {
font-weight: bold;
}

@supports (text-shadow: 1px 0 0 #000) {
a:hover {
font-weight: normal;
text-shadow: 1px 0 0 currentColor;
}
}

Example using @supports.

I prefer using @supports as it is future-friendly and although it is not supported in IE11 it is supported in Edge and every other modern browser.


Print Share Comment Cite Upload Translate
APA
justmarkup | Sciencx (2024-03-28T15:12:59+00:00) » Using text-shadow instead of font-weight bold to avoid jumping. Retrieved from https://www.scien.cx/2015/11/02/using-text-shadow-instead-of-font-weight-bold-to-avoid-jumping/.
MLA
" » Using text-shadow instead of font-weight bold to avoid jumping." justmarkup | Sciencx - Monday November 2, 2015, https://www.scien.cx/2015/11/02/using-text-shadow-instead-of-font-weight-bold-to-avoid-jumping/
HARVARD
justmarkup | Sciencx Monday November 2, 2015 » Using text-shadow instead of font-weight bold to avoid jumping., viewed 2024-03-28T15:12:59+00:00,<https://www.scien.cx/2015/11/02/using-text-shadow-instead-of-font-weight-bold-to-avoid-jumping/>
VANCOUVER
justmarkup | Sciencx - » Using text-shadow instead of font-weight bold to avoid jumping. [Internet]. [Accessed 2024-03-28T15:12:59+00:00]. Available from: https://www.scien.cx/2015/11/02/using-text-shadow-instead-of-font-weight-bold-to-avoid-jumping/
CHICAGO
" » Using text-shadow instead of font-weight bold to avoid jumping." justmarkup | Sciencx - Accessed 2024-03-28T15:12:59+00:00. https://www.scien.cx/2015/11/02/using-text-shadow-instead-of-font-weight-bold-to-avoid-jumping/
IEEE
" » Using text-shadow instead of font-weight bold to avoid jumping." justmarkup | Sciencx [Online]. Available: https://www.scien.cx/2015/11/02/using-text-shadow-instead-of-font-weight-bold-to-avoid-jumping/. [Accessed: 2024-03-28T15:12:59+00:00]
rf:citation
» Using text-shadow instead of font-weight bold to avoid jumping | justmarkup | Sciencx | https://www.scien.cx/2015/11/02/using-text-shadow-instead-of-font-weight-bold-to-avoid-jumping/ | 2024-03-28T15:12:59+00:00
https://github.com/addpipe/simple-recorderjs-demo