CSS: bolding some text without changing its container's size

Question

I have a horizontal navigation menu, which is basically just a

with the elements set side-by-side. I do not define width, but simply use padding, bec

Answer 1

The most portable and visually pleasing solution would be to use text-shadow. This revises and shows examples of Thorgeir's answer using Alexxali's and my own tweaks:

  li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }

This puts tiny "shadows" in black (use your font's color name/code in place of black if necessary) on both sides of each letter using units that will scale properly with font rendering.

Warning: px values do support decimal values, but they won't look so great when the font size changes (e.g. the user scales the view with Ctrl++). Use relative values instead.

This answer uses fractions of ex units since they scale with the font.
In ~most browser defaults*, expect 1ex ≈ 8px and therefore 0.025ex ≈ 0.1px.

See for yourself:

li             { color: #000; } /* set text color just in case */
.shadow0       { text-shadow: inherit; }
.shadow2       { text-shadow: -0.02ex 0 #000, 0.02ex 0 #000; }
.shadow4       { text-shadow: -0.04ex 0 #000, 0.04ex 0 #000; }
.shadow6       { text-shadow: -0.06ex 0 #000, 0.06ex 0 #000; }
.shadow8       { text-shadow: -0.08ex 0 #000, 0.08ex 0 #000; }
.bold          { font-weight: bold; }
.bolder        { font-weight: bolder; }
.after span        { display:inline-block; font-weight: bold; } /* workaholic… */
.after:hover span  { font-weight:normal; }
.after span::after { content: attr(title); font-weight: bold; display:block; 
                     height: 0; overflow: hidden; }
.ltrsp         { letter-spacing:0; font-weight:bold; } /* @cgTag */
li.ltrsp:hover { letter-spacing:0.0125ex; }
li:hover       { font-weight: normal!important; text-shadow: none!important; }

MmmIii123 This line tests shadow0 (plain)
MmmIii123 This line tests shadow2 (0.02ex)
MmmIii123 This line tests shadow4 (0.04ex)
MmmIii123 This line tests shadow6 (0.06ex)
MmmIii123 This line tests shadow8 (0.08ex)
MmmIii123 This line tests [title] (@workaholic…)
MmmIii123 This line tests ltrsp (@cgTag)
MmmIii123 This line tests bold
MmmIii123 This line tests bolder
MmmIii123 This line tests shadow2 (0.02ex) + bold
MmmIii123 This line tests shadow4 (0.04ex) + bold
MmmIii123 This line tests shadow6 (0.06ex) + bold
MmmIii123 This line tests shadow8 (0.08ex) + bold

Hover over the rendered lines to see how they differ from standard text.

Alter your browser's zoom level (Ctrl++ and Ctrl+-) to see how they vary.

I added two other solutions here for comparison: @cgTag's letter spacing trick, which doesn't work so well since it involves guessing font width ranges, and @workaholic_gangster911's ::after drawing trick, which leaves awkward extra space so the bold text can expand without nudging neighboring text items (I put the attribution after the bold text so you can see how it does not move).

---

In the future, we'll have more variable fonts capable of things like changing font grade via font-variation-settings. Browser support is ramping up (Chrome 63+, Firefox 62+) but this still requires more than just standard fonts and few existing fonts support it.

If you embed a variable font, you'll be able to use CSS like this:

/* Grade: Increase the typeface's relative weight/density */
@supports (font-variation-settings: 'GRAD' 150) {
  li:hover { font-variation-settings: 'GRAD' 150; }
}
/* Failover for older browsers: tiny shadows at right & left of the text
 * (replace both instances of "black" with the font color) */
@supports not (font-variation-settings: 'GRAD' 150) {
  li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }
}

There is a live demo with a slider to play with various grades on the Mozilla Variable Fonts Guide. Google's Introduction to variable fonts on the web has an animated GIF demonstrating a toggle between a high grade and no grade: