CSS font-weight property helps set the weight of the given font. It specifies how thin or thick the font will appear in the front end. However, the CSS font-weight property is supported by either the weights specified by the browser or the available font faces in a font family. 

You can either define the weight by using the available keywords or by the numbers that are multiples of 100, up to 900. The thickness of the font increases proportionally to the number.

Syntax: font-weight: normal|bold|lighter|bolder|number|initial|inherit|unset; 

In the above syntax, normal, bold, lighter, bolder, bolder, and number are general property values whereas initial, inherit, and unset are global values.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Property Values for Font Weights in CSS

Based on this syntax, the property values represent:

  • Normal: It represents the default, normal weight of the font. The numeric equivalent to the normal keyword is 400.
  • Bold: This property value helps define a bold font. The numeric equivalent for this property is 700.
  • Lighter: This property value is associated with the parent class’s font-weight. Using this keyword will make the font’s thickness one level lighter than the font in the parent class.
  • Bolder: Like the lighter property value, even bolder is associated with the parent class’s font-weight. However, this keyword will increase the font-weight by one level instead of making the font lighter.
  • Number: Instead of writing the “number” keyword as the property value, you need to write numbers 100, 200, …, 900. If the weight for a specified number is not available for a given font family, a preferable number is applied.

Global Values for Font Weights in CSS

Besides the standard property values, font weights in CSS also accept global values.

  • Initial: The initial keyword will reset the font-weight to the default value.
  • Inherit: This global value will reset the font-weight to the value inherited from the element's parent class.
  • Unset: This will reset the value back to the font-weight inherited from the parent class, if available. If the weight is not inherited from the parent class, it will reset it to the initial default value.

Common Relative Font Weights for Lighter and Bolder Values

Using lighter or bolder keywords will either increase or decrease the thickness based on the font-weight inherited from the parent class. The below chart represents what absolute weight will be selected based on the inherited value.

Inherited Value

Bolder

Lighter

100

400

100

200

400

100

300

400

100

400

700

100

500

700

100

600

900

400

700

900

400

800

900

700

900

900

700

Note: When changing to a relative font, only four values, 100, 400, 700, and 900, are considered, regardless of the font family.

Become a Certified UI UX Expert in Just 5 Months!

With The Best-in-class UI UX ProgramExplore Program
Become a Certified UI UX Expert in Just 5 Months!

Common Font Weights Name Mapping

All the numerical values 100 to 1000 correspond to common weight names as given in the table below. But using names other than normal and bold is not allowed in CSS. 

Value

Mapped Name

100

Thin

200

Extra light

300

Light

400

Normal

500

Medium

600

Semi-bold

700

Bold

800

Extra bold

900

Black

950

Extra black

Now that we know all the possible values for the font-weight property in CSS, let’s use them in an example. 

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Example of Using Font Weight in CSS

In this example, we will use all the standard property values.

<!DOCTYPE html>

<html>

  <head>

    <title>Center example</title>

  </head>

  <body>

    <p style="font-weight: normal;">Normal font</p>

    <p style="font-weight: bold;">Bold font</p>

    <p style="font-weight: lighter;">Lighter font</p>

    <p style="font-weight: bolder;">Bolder font</p>

    <p style="font-weight: 100;">100 weight</p>

    <p style="font-weight: 200;">200 weight</p>

    <p style="font-weight: 300;">300 weight</p>

    <p style="font-weight: 400;">400 weight</p>

    <p style="font-weight: 500;">500 weight</p>

    <p style="font-weight: 600;">600 weight</p>

    <p style="font-weight: 700;">700 weight</p>

    <p style="font-weight: 800;">800 weight</p>

    <p style="font-weight: 900;">900 weight</p>

  </body>

</html>

Output:

CSS_Font_Weights_1

CSS_Font_Weights_2

Browsers That Support CSS Font-Weight Property

The CSS font-weight property is supported by the following browsers.

Browser Name

Version

Google Chrome

2.0

Safari

1.0

Mozilla Firefox

1.0

Microsoft Edge

12.0

Opera

3.5

Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!

Conclusion

Several CSS properties combine to style a web page like the font-weights (bold, extra bold, light, very light, or numbers). You can learn about these properties by referring to Simplilearn's CSS Tutorial for Beginners or the Advanced CSS Tutorial. These tutorials cover the fundamentals of CSS, which will prove to be a stepping stone to becoming a great front-end developer. 

CSS is a styling language that helps style a web page, but you need to create the page first. Learn how to do that and how CSS blends with other front-end programming languages by enrolling in our Post Graduate Program in Full Stack Web Development. You can also go for our 90-day free Front-End Web Development Course. These courses are designed to help you acquire practical knowledge and hands-on practice for a deep understanding of the concepts, thereby empowering you with the tools to secure better job opportunities.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 16 Dec, 2024

6 Months$ 8,000
Automation Test Engineer Masters Program

Cohort Starts: 27 Nov, 2024

8 months$ 1,499
Full Stack Java Developer Masters Program

Cohort Starts: 18 Dec, 2024

7 months$ 1,449
Full Stack (MERN Stack) Developer Masters Program

Cohort Starts: 8 Jan, 2025

6 Months$ 1,449

Recommended Reads