CODEWITHSUNDEEP
cssbold
wrongusername
wrongusername

Reputation: 18918

Customizing bold stuff with CSS

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.

Upvotes: 3

Views: 3482

Answers (6)

Karl Adler
Karl Adler

Reputation: 16796

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, /*...*/ ;

Upvotes: 3

Dan Grossman
Dan Grossman

Reputation: 52372

You can render the text as an image in your preferred font and boldness, then set that image as the background-image of the text in CSS, and set the text-indent to a large positive or negative number to move it off page. The image will appear where the text was, while the text is still in the page for screen readers and search engines.

Upvotes: 0

nonopolarity
nonopolarity

Reputation: 151026

you can specify a font-weight of 900, although most browsers render it the same as bold.

You can consider using some fonts such ash Arial Black which is quite bold.

You may want to include other fonts for the platform you intend to support, such as on Linux... on Mac Snow Leopard, for sure there is Arial Black, and on Windows 7, the font in control panel shows only Arial, but it has style such as Black, and using "Arial Black" works:

http://jsfiddle.net/S2SxS/2/

Upvotes: 0

albuvee
albuvee

Reputation: 2764

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/

Upvotes: 3

Zain Shaikh
Zain Shaikh

Reputation: 6043

yes you can tweak it like this

.myClass 
{
    font-weight: 700;
}

Upvotes: 0

rcapote
rcapote

Reputation: 1044

The font-weight (w3schools.com) property allows you to change the boldness of your text. I'm not sure if all browsers fully support it or not, however.

Upvotes: 1

Related Questions