Word spacing in Bootstrap button

Question

Wnen I use buttons on my page the word spacing is too large by default.

.btn {
  word-spacing: 1px;
}

is it correct to use negative word spacing? It seems to do the trick.

.btn {
  word-spacing: -8px;
}

It's a little bit strange that it has this big spacing by default, but maybe it's just a matter of preference.

Answer 1

Twitter Bootstrap (bootstrap.css||bootstrap.min.css) does not set word-spacing on .btn elements.

Inspect the element and see what stylesheet is adding that rule, because I can assure you it is not the default bootstrap.css (as of v3.3.6). You are either using a modified (non-standard) Twitter Bootstrap version or you are loading a different theme/framework on top of it.

And yes, as long as you load your own stylesheet last or you are using a stronger selector than the one that's currently setting the rule, you can override the word-spacing property on .btns (whithout "breaking" anything else).

You are only changing the space between the letters of your buttons. As a sidenote, I recommend using word-spacing: 0;, which will render the font exactly as it has been designed, with proper kerning and ligatures.