The font-weight property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by the browser.

span {
    font-weight: bold;

The font-weight property accepts either a keyword value or predefined numeric value. The available keywords are:

  • normal
  • bold
  • bolder
  • lighter

The available numeric values are:

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

The keyword value normal maps to the numeric value 400 and the value bold maps to 700.

In order to see any effect using values other than 400 or 700, the font being used must have built-in faces that match those specified weights.

If a font has a bold ("700") or normal ("400") version as part of the font family, the browser will use that. If those are not available, the browser will mimic its own bold or normal version of the font. It will not mimic the other unavailable weights. Fonts often use names like "Regular" and "Light" to identify any alternate font weights.

The following demo demonstrates the use of the alternate weight values:

Check out this Pen!

The above demo is using the free font Open Sans, embedded using the Google Web Fonts API. The font is loaded with all the available font weights and so, using the font-weight property, the different available weights are displayed as described by each paragraph's text. The unavailable weights simply display the logically closest weight.

Common fonts like Arial, Helvetica, Georgia, etc. do not have weights other than 400 and 700. So the same demo displayed with one of those fonts would display only two weights in the nine paragraphs.

Using "bolder" and "lighter" keywords

The keyword values bolder and lighter are relative to the computed font weight of the parent element. The browser will look for the closest "bolder" or "lighter" weight, depending on what is available in the font family, otherwise it will simply choose "400" or "700", depending on which makes the most sense.

Child elements will not inherit the "bolder" and "lighter" keyword values, but instead will inherit the computed weight.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works


  1. User Avatar
    Petr Chutny
    Permalink to comment#

    Hello, thanks for the article! I am still little confused – bolder should be more than bold, so it may be 800,900?

    • User Avatar
      Permalink to comment#

      No, not necessarily. “bolder” is not an absolute weight, but is relative to the existing font’s boldness. So it could map to 700, if the font starts at a regular weight. It’s a little confusing, but just realize it’s not relative to the “bold” keyword, it’s relative to the boldness (or lightness) of the font, whatever that currently is.

  2. User Avatar
    Permalink to comment#

    Great article as it points out the many browser support problems that I have been having. I found certain browsers were not reading the same font weights, even when declaring the varying weights with a link tag in the head. Google Chrome seems to ignore the font weight 400 even with a supported google font weight at 400.
    The only solution I found was to declare these weights as “normal” to get it to work but it confused me as to why it was happening where in all other browsers it works fine. It may just be this particular font but it certainly puzzled me.

  3. User Avatar
    WM Spielplan
    Permalink to comment#

    can i use different font-weights for different browsers? I use the FF Dagny Pro font via typekit in light and it is a good read in Safari, but a terrible one in Firefox. So i would use font-weight: 200; for Safari and for other Browsers font-weight:400;

    Is it possible to do that? Thanks!

    • User Avatar
      Louis Lazaris
      Permalink to comment#

      I don’t recommend that, but you’d have to use a browser hack:

      I don’t know off hand if there’s one you can use for what you want, but you can search that site. You could also use UA detection, but that’s even worse.

      Best choice: Use a weight that looks pretty good everywhere, even if not perfect.

  4. User Avatar
    Noufal Binu
    Permalink to comment#

    Why css bold keword not working without span, but font-weight: normal; is working.

  5. User Avatar
    aw media webdesign
    Permalink to comment#

    In Win7 with Chrome and Open Sans 300,400 and 600 included it just shows two variations(400 and 700). So, Louis’ recommendation to use a font-weight which shows up nice in all situations is the best practical solution.

  6. User Avatar
    Permalink to comment#


  7. User Avatar
    Permalink to comment#

    In Open sans Demo though the 600 version is available both 600 and 700 almost look same.
    I am working on a project which is using open sans from google fonts i used 600 weighted variant for navigation bar and after some day they started looking like 700. Is there any problem in google fonts style sheets or they are not serving proper fonts.

  8. User Avatar
    Permalink to comment#

    Thanks for the write-up on this. I’m actually trying to find out the way that Photoshop handles the use of their bold button – definitely don’t think it’s using the bold variation from the actual font unfortunately.

    Johannesburg Website Design,

  9. User Avatar
    Permalink to comment#

    Note that according to the W3C specifications the keywords ‘bolder’ and ‘lighter’ do not use every possible variant available in the font. Instead for ‘bolder’ only 400, 700 and 900 and for ‘lighter’ only 100, 400 and 700 are used.

    See for example “Meaning of relative weights” here:

  10. User Avatar
    Permalink to comment#

    It’s 2018 and you finally answered what I’ve been looking up for 2 days. So bolder & lighter are relative to current font weight. Why doesn’t 3wschools just say that! Thank you!!

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.