1. Home
  2. Computing & Technology
  3. Web Design / HTML

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;

Explore Web Design / HTML
About.com Special Features

The Best Web Trends of the Decade

A look back at the best innovations, ideas and technologies over the last 10 years, More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML

©2010 About.com, a part of The New York Times Company.

All rights reserved.