Font Weights

Examples of the font-weight CSS Style Property

Below are samples of text set at different font-weight values. Not all visual browsers display the various font-weights. Be sure to test before using any but "normal" or "bold" as many Web browsers don't support other options.

This text is "normal".

font-weight: normal;

This text is "bold".

font-weight: bold;

This text is "lighter" than the parent element which is "normal".

font-weight: lighter;

This text is "bolder" than the parent element which is "normal".

font-weight: bolder;

The Numerical Weight Values

Font Weight 100

font-weight: 100;

Font Weight 200

font-weight: 200;

Font Weight 300

font-weight: 300;

Font Weight 400

font-weight: 400;

Font Weight 500

font-weight: 500;

Font Weight 600

font-weight: 600;

Font Weight 700

font-weight: 700;

Font Weight 800

font-weight: 800;

Font Weight 900

font-weight: 900;