Difference in application of font-weight bold / bolder

Question

Difference in application of font-weight bold / bolder

Navigation

#1 by (6 votes)
#2 by (3 votes)

5

I would like to know the difference in using the CSS properties font-weight: bold and font-weight: bolder , because applying these properties I can not see difference between one and other as well as normal font-weight and lighter. Would it be anything cross-browser related?

#teste1 {
  font-weight: bold;
}
#teste2 {
  font-weight: bolder;
}
#teste3 {
  font-weight: normal;
}
#teste4 {
  font-weight: lighter;
}

<p id="teste1">Testando!</p>
<p id="teste2">Testando!</p>
<p id="teste3">Testando!</p>
<p id="teste4">Testando!</p>

css

asked by anonymous 10.12.2018 / 12:52

2 answers

3

If the font type used has scales available, the bolder will assume the next higher scale in reference to the scale of the parent element. The value of bold uses the 700 scale, so if the font type used has the 800 or 900 scales, the bolder will assume one of these values, which is immediately after 700 .

In this example, using a Google Fonts font, with scales 700 and 900 , the bolder of the child div assumes the value of 900 in relation to the bold 700 of the parent div:

body{
   font-family: 'Noto Serif TC', serif;
}
#pai {
   font-weight: bold;
}
#filho {
   font-weight: bolder;
}

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+TC:400,700,900" rel="stylesheet">

<div id="pai">
   pai - 700 (negrito normal)
   <div id="filho">
      filho - 900 (negrito mais forte)
   </div>
</div>

I think I have no cross-browser relationship, but rather the type of font used.

10.12.2018 / 13:20

When the destructor of an object is called in C ++? App - Xamarin or Ionic?

score 6 · Accepted Answer

Bolder , or lighter is actually an inherited attribute. I'll explain better. If the parent has font normal , and you put bolder in a child the browser understands that the child must have a bold upper than the parent. Just like lighter the browser understands that the child should have the font "lighter" than the parent.

Another point to have and mind is the limitation of the font-family itself, which often does not have a font-wight heavier than the bold itself, so using bolder would be the same as bold , because it does not have a heavier type to apply, so does lighter , if font-family does not have a lighter type the lighter type will be normal.

The problem here is that the font itself must have one or more weights. If it does not you can not make it bold at all.

PORTUGUESE "The problem here is that the font itself should have one or more weights. If it does not have any, you can not bold it in any way."

See this case study:

For the test case,% Segoe UI was used for Windows. If the font does not have the weight for all the settings, for example if it does not have until the 900 the maximum that it will arrive is in the 700.

OBS:

Normal font is considered 400, above that semi-bold % light and light , extra light , thin

Source: link

Mozilla Referral Table: link