Customizing bold stuff with CSS

Question

I don't think my bold text in a webpage are bold enough, so I was wondering if there were any ways I could tweak bold text with CSS.

Answer 1

with font-weight you can specify the «boldness» of your text with a higher number … but almost every browser does only display the text in the same «boldness» as without a specific number.

Alternatively you can use Bold- or Black-Styles of the Font itself, but most Internet-Users may not have installed this specific fonts.

see examples: http://clagnut.com/blog/2228/

Answer 2

a workaround if the bold font does not really support bold style is to emulate boldness using css3 textshadows.

<span class="bold">some text goes here</span>

span.bold {
    text-shadow: 1px 0px 0px #000; /* the textcolor */
    padding-right: 1px;
    letter-spacing: 1px;
}

Adds 1px to the right and spaces the letters to make it looking nice again. You may also combine many "shadows" by putting them in comma list:

text-shadow: 1px 0px 0px #000, -1px 0px 0px #000, /*...*/ ;