Css: Differencebetween "Bolder" and "Bold" Font-Weight Styles

CSS: what is the difference between bolder and bold font-weight styles?

bolder is a relative font weight:

The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent

bolder and lighterare even part of the official spec. How they are interpreted and displayed is up to the browser.

The fact that they appear the same visually is because most browsers don't properly support font weight variations beyond bold and normal.

Here's a question with background info: Are all CSS font-weight property's values useful?

Is there a difference between font-weight bold and 700 when using webfonts?

There's no difference between them. Maybe using it like font-weight:bold makes your code more readable than using font-weight:700.

You can also use another values about font-weight.

1. 100 - Thin
2. 200 - Extra Light (Ultra Light)
3. 300 - Light
4. 400 - Normal
5. 500 - Medium
6. 600 - Semi Bold
7. 700 - Bold
8. 800 - Extra Bold (Ultra Bold)
9. 900 - Black (Heavy)

'font-weight:normal' is synonymous with 'font-weight:400', and 'font-weight:bold' is synonymous with 'font-weight:700'.

Why is bolding already bolded text rendering as super bold ?

While the various links in the other posts may explain things, SO policy is to always have the answers on the same page as the questions, to avoid having to click all those links.

Here we go then.

The answer is in the browser's built in style sheets. h1 has font-weight: bold by default, and b and strong have font-weight: bolder.¹

Now there are many different font weights. We don't have just normal and bold, we have 9 different ones, numbered 100 to 900.² The normal weight is 400, and the definition of bold is 700. The definition of bolder is "more bold than the font weight of the parent".

So if you have a h1 with a b inside, the h1 will be bold (i.e. weight 700), and the b inside will be bolder (i.e. more bold than 700).

That's basically all there is to it.

Knowing this, there are multiple solutions:

• Use a font that has only two weights.
  
  This is not the best way though. What if the next system update to the user's computer includes a version of this font with more weights?

• Write b {font-weight: bold} in your stylesheet, or to be more thorough, h1 > * {font-weight: inherit}, so that the contents of the h1 will always be the same weight, no matter what.

• Simply remove the <b> tags from the content of the h1. In this particular case, I don't see any reason to use them.

• Or, leave everything as is and accept that you can put text inside a h1 that is even bolder. That might have its uses: <h1>Back to <strong>Basics!</strong></h1>

¹ This is not the case in all browsers though. That's why we need reset style sheets.

² Not all fonts have all font weights. Many have only two.

Are all CSS font-weight property's values useful?

If the font you are displaying has more weights like semi-bold, light, etc. the browser may be able to render those weights if you use one of the numeric values. Most end-user fonts come with two or three styles only, though, so I don't think this is much applicable to the real world. I would rely on normal (=400 I think) and bold (=700) only.

There's good additional info in the W3C reference on font-weight: bold as well.

Update: Here is an in-depth blog post on how the styles are rendered in modern browsers. It is titled "Font-weight is still broken in all but one browser" :)

2nd Update: As clagnut.com suffered a catastrophic dataloss here is the archived post

Javascript .css( font-weight ) change of behaviour

Because the names bolder, bold, normal all maps up to the numerical values for the weight of the fonts. There are more possible numerical values than literal names in CSS thus jQuery returns the numerical value instead of the names of the weight.

I would suggest you remove the check for === "bold" at all because it is never going to return that value.

Check this:
http://htmldog.com/references/css/properties/font-weight/

Specifying Style and Weight for Google Fonts

They use regular CSS.

Just use your regular font family like this:

font-family: 'Open Sans', sans-serif;

Now you decide what "weight" the font should have by adding

for semi-bold

font-weight:600;

for bold (700)

font-weight:bold;

for extra bold (800)

font-weight:800;

Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.

Pretty smart :-)

Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.

For example the following link will include both weights 400 and 700:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

For CSS2

<link href='fonts.googleapis.com/css2?family=Comfortaa:wght@400;700'; rel='stylesheet' type='text/css'>

using different font weight of the same google font in css

Use the font-weight property

http://www.w3schools.com/cssref/pr_font_weight.asp

Example:

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

Make small font bolder

You could try a font-shadow using the same colour shadow as font colour.

One of the following might do it:

Add a blurred font shadow to each edge

text-shadow: 0px 0px 1px #000000;

Or add one pix to the vertical thickness of each letter

text-shadow: 0px 1px 0px #000000;

Or add one pix to the horizontal thickness of each letter

text-shadow: 1px 0px 0px #000000;

I think the 2nd of these would be my personal preference.

However, support is not guaranteed being CSS3 (although I believe this is one of the better supported features) and may detract from the readability.

Find a generator here

---

Related Topics