Skip to main content
davidhelp
davidhelp
Inspiring
September 12, 2021
Answered

Layout shift on Hover when Text is Made Bold

  • September 12, 2021
  • 2 replies
  • 1670 views

Hello

See link below for example.

Move curser over the hyperlinks to see the layout shift over.
I would like to change the font in a hyperlink when you hover the curser over the text. You can see the layout shift when this happens.
If you remove the font-family: 'Georgia' then the layout does not shift.
I am using a fake bold using the text-shadow: property.
If I do not use it then the layout shifts as well.

 

Questions: Is there a better way then using the fake text shadow to create bold text when the curser hovers over the text and also can I change the font without the layout shifting over?
http://davidswebsite.com/test/Layout_shift.html

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Change this:

    <style>
a:link {color: #000000; text-decoration: underline; font-family: 'Georgia'; }       /* black */
a:active {color: #ff0000; text-decoration: underline; }     /* red */
a:visited {color: #0080ff; text-decoration: underline; }    /* blue */

a:hover { color: #ff0000;   /* red */
text-decoration: none;
background-color: white; }
/* red text, white background on mouse hover*/  
</style>

     

    To this:

    <style>
a {color: #000; font-family: "Georgia", "Times New Roman", serif;}

a:visited {color: #0080ff;}

a:hover, a:active, a:focus {
color: #ff0000; 
background-color: #FFF;
text-decoration:none;
}
</style>

     

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    September 12, 2021

    Change this:

    <style>
a:link {color: #000000; text-decoration: underline; font-family: 'Georgia'; }       /* black */
a:active {color: #ff0000; text-decoration: underline; }     /* red */
a:visited {color: #0080ff; text-decoration: underline; }    /* blue */

a:hover { color: #ff0000;   /* red */
text-decoration: none;
background-color: white; }
/* red text, white background on mouse hover*/  
</style>

     

    To this:

    <style>
a {color: #000; font-family: "Georgia", "Times New Roman", serif;}

a:visited {color: #0080ff;}

a:hover, a:active, a:focus {
color: #ff0000; 
background-color: #FFF;
text-decoration:none;
}
</style>

     

    Nancy O'Shea— Product User & Community Expert
      davidhelp
      davidhelpAuthor
      Inspiring
      September 12, 2021

      Thanks for the tip. I had looked and looked from searches on the internet and there were several suggestions and none were your answer.

      I was giving up and was just going to remove the fake bold text shadow property and add the font Georgia to help indicate the hyperlink. If I wanted it bold it, it does shift the layout but using Georgia font makes it appear bold compared to the Roboto font or Open sans fonts I use so no need to.

       

      Your answer is much much better. Thanks again.

      Test page:  http://davidswebsite.com/test/Layout_shift.html

      O
      osgood_
      Legend
      September 13, 2021
       

      Adding any variation to the font which affects the width, like bold, italic, a different font will cause a 'page shift' as the result will be the font will occupy more or less room, so best to just highlight the text in a different color or add/remove the underline to give it distinction.

      O
      osgood_
      Legend
      September 12, 2021

      My advice would be to stick with the same font/weight and you won't encounter the movement. Most fonts will have different spacing/cuts and weights, so wont occupy the same physical space, causing small variations when 'replaced' with a different font/weight.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices