Bold text changes alignment of surrounding text?

Question

I have a simple navigation, and show the active clicked tab bold.

<ul class="nav navbar-nav>
    <li><a href="#">Tab1</a></li>
    <li><a href="#">Tab2</a></li>
    <li><a href="#">Tab3</a></li>
</ul>

The clicked tab will always get the class="active".

li.active a {
    font-weight: bold;
}

Problem: The size of the tabtext somehow changes a bit when I click it due to the bold font, cause the tabs beneath to move 1-2px.

Question: how can I prevent this?

When I use font-weight: normal, then these movements are gone. So they are definitely caused by the bold font. But how can I force the nonclicked tab-texts to no move?

why don't you try with `font-wight:700` instead of `font-weight:bold` — Amit singh, Oct 01 '15 at 11:36

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Adding bold will change the increase the amount of pixels required to render the text, i.e. bold text is bigger than normal text - even though the font-size is unaffected. This change will push the surrounding elements.

You can either not use bold or there are various methods available to prevent the text shifting by 'reserving the space', e.g.

Inline elements shifting when made bold on hover

change of font-weight to bold is unwantingly changing width of element

Bold text changes alignment of surrounding text?

1 Answers1