CODEWITHSUNDEEP
htmlcss
reswanth
reswanth

Reputation: 73

How to decrease the boldness of a text?

#first {
  text-align: center;
  font-size: 40px;
  font-weight: 200;
}
#second {
  text-align: center;
  font-size: 25px;
  font-weight: 50;
}
#third {
  text-align: center;
}
<p id="first">One account.All of google</p>
<p id="second">Sign in to continue to Gmail</p>
<div id="login">
  <form>
    <img src="img.jpg">
    <input type="text" name="username" value="Enter your username">
    <br>
    <input type="password" name="password" value="password">
    <br>
    <input type="submit" value="Sign in">
    <br>
    <a href="">Forgot password?</a>
  </form>
</div>
<p id="third">Sign in with different account</p>

I'm unable to make the font-weight to decrease. I want the #second id to have lesser weight than the #first id one. I've used the font-weight but it still isn't working.

Upvotes: 1

Views: 2727

Answers (1)

Scott
Scott

Reputation: 21882

Font weights are not a dynamic thing. You can not arbitrarily decide to use a value and expect the font-weight to change. font-weight: 50; is never a correct property. No font contains a "50" weight.

A browser, or CSS, do not create font weights, or apply pseudo-weights (faux weight) to fonts with the only caveat being the bold designation -- browser may create a faux "bold" in some cases. The font file in use must posses the weight for the font-weight property to have effect. Browsers may guess and use the next closest weight. Sometimes a browser may guess adequately, sometimes they don't or there's nothing in the font file to use even if a guess is made.

There are two basic forms of font-weight --

Generic terms:

  • font-weight: normal; - uses the standard weight of the font
  • font-weight: bold; - uses the a weight of the font that is greater than "normal" if the font contains this weight
  • font-weight: bolder; - uses a weight of the font that is greater than "normal" by 2x if the font contains this weight. Fallback is the use of the weight immediately greater than "normal" or "bold".
  • font-weight: lighter; - uses a weight of the font that is less than "normal" if the font contains this weight. Fallback is the use of the "normal" weight.
  • font-weight: inherit; -- Inherits the weight of the parent element
  • font-weight: initial; -- uses the default weight of the font

And option two, specific weight designations. Note that the font file must be configured to contain these designations internally. You can't simply pick a number and use it.

  • font-weight: 100; if the font contains this weight
  • font-weight: 200; if the font contains this weight
  • font-weight: 300; if the font contains this weight
  • font-weight: 400; if the font contains this weight
  • etc.

Setting font-weight: 100; to a font that does not contain the 100 weight designation simply means the browser will use the next closest weight that is available. So, if your font file only contains weights for 400, 600, and 900 -- if you set the weight to 100 and 200, then the 400 weight would be used in both instances because 400 is the closest value to 100 and 200. Setting the weight to 700 could mean the browser uses the 600 weight or the 900 weight. In most instances the lesser value is chosen, so most likely the 600 weight would be used.

If you want to use specific weights for a font family, you first need to ensure the font file itself contains that weight. Based on your posted markup, you need to use a font that actually contains the 200 and 100 weight designations.

Upvotes: 7

Related Questions