Hello, I am doing a website with white font on black background and I am realizing that the bold text (between <b> and </b>) doesn't look that bold at all... I was wondering if there is a way with CSS to make that bold look bolder without having to go replace all the <b> tags with <span> tags. Is there a way to do it quickly and easily from within the style sheet? Thanks
It seems that you can't, I'm afraid. I just tried and it didn't work. I tried to alter the value of font-weight like the following. b { font-weight: bolder; } Code (markup): The only change of value that worked was this: b { font-weight: normal; } Code (markup): Of course, that's the opposite of what you want. It looks like you will have to swap the <b> tags for <span> tags and give them a styled class. <b> tags are deprecated, anyway.
The 'b' element will take the same style rules that a 'span' element will. The 'b' element is not deprecated. cheers, gary
I thought <b> had been deprecated. Even if it hasn't officially been deprecated, the fact remains that its use is dissuaded by the W3C in place of <strong>. It's official deprecation I suspect is imminent. How do you make it bolder without the use of an ID or class?
The b and strong elements are two different kettles of fish. The strong element is meant to convey strong emphasis. While the b element takes its meaning from the context; for example, a typographic convention is to bold journal or book names, and italicize article titles, so you would mark it as <p><b>Readers Digest</b>, May 2009, <i>My Most Unforgettable Character</i>.</p> Code (markup): Another convention is to italicize the journal name and quote the article title. Either way, the meaning is derived from the context. In neither case does italics nor bold indicate emphasis. Discussions on the html5 list validate the contextual nature of the b and i elements' semantic value. How would you do it on the span element? cheers, gary
I want you to tell me. I tried and couldn't do it. I was unable to get <b> to be bolder than bold, or <span> to be bolder than bold. According to W3C, font-weight can have the following values: normal bold bolder lighter 100 200 300 400 (equivalent to normal) 500 600 700 (equivalent to bold) 800 900 I tried the following, which failed: b { font-weight: bolder; } Code (markup): b { font-weight: 900; } Code (markup): I also tried <span>s with IDs and classes. How do you do it?
actually 'bolder' does exist but I tried that I noticed that the bold parts of my text are sometimes between <b> and sometimes between <strong> tags but none of the w3 css2 supported things didn't seem to have an effect with white text on black and Safari as the browser I ended up giving the overall text a really light shade of gray (almost white) and giving the strong and b attributes the color white to distinguish their boldness from the rest of the text
First of all, let's take a look at css2.1 §15.6 Font boldness: the 'font-weight' property. Pay particular attention to this bit, What that means is that if the font family does not include various weights, you won't get them no matter what you declare for the weight. I should say, you won't get native weights. Most browsers will try to produce a bold or an italic even if they are not a part of the font-family; sometimes they will borrow from a similar family that does include those styles or weights. Most truetype fonts have only two weights, 400 and 700, in the package. Opentype fonts, theoretically are packages with nine weights. Notice the Century-Schoolbook family: Font name Family name Style Stretch Weight Century-Schoolbook-Bold Century Schoolbook Normal Normal 700 Century-Schoolbook-Bold-Italic Century Schoolbook Italic Normal 700 Century-Schoolbook-Italic Century Schoolbook Italic Normal 400 Century-Schoolbook-Roman Century Schoolbook Normal Normal 500 Code (markup): Notice that the regular weight is 500, and italics are made lighter at 400. Bold is 700 weight. Those are the weights available. Period. Now look at another font face: Font name Family name Style Stretch Weight Candice-Regular Candice Normal Normal 400 Code (markup): This face has only the one weight. There is no bold or bolder, nor 700 nor any other value. Nobody has said which face is being used, so the answer is simply guesswork. Not quite true. Refer to the link given above, especially this: 'font-weight' Value: normal | bold | [b]bolder[/b] | [b]lighter[/b] | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit ... Code (markup): Note also, Test case p { background-color: black; color: white; } ================ <p>This is <strong>strong</strong>, and this is <b>bold</b>.</p> <p>This is <em>emphatic</em>, and this is <i>italic</i>.</p> Code (markup): This code will work, unless your system fonts are really screwed up. cheers, gary
Ah, that explains it. So, it's dependent on the font family and the weights in which it is available. This was a constructive discussion. I appreciate it. I tried to give you a rep point but wasn't allowed. You must have helped me recently.
I couldn't log in yesterday. Servers here suck. Anyway, what I do when I need BOLDER than BOLD text is, I either do a smalle increase in font size (which in most fonts looks like it adds a thickness to the letters, though this is in uneven increments and isn't the same per font) OR I try keeping the bold and use another, similar font. Sometimes that works. You could get the site to look nice for yourself, like this guy did but obviously you can't expect users to have done the same.