Font Weight Demo

Fonts remain a sore spot in contemporary web design. Due to licensing issues, web designers are mostly limited to a handful of web-safe fonts. Those are fonts that are commonly bundled with operating systems and browsers so that the majority of site visitors will see the site as intended. Web developers have come up with a variety of font replacement schemes, but these are inconvenient and add needless complexity to the page.

The CSS 2.1 specification includes a percentage system for font weight. If this actually worked in the browser, it would give the web designer a powerful tool for enhancing the capabilities of those web-safe fonts.

Unfortunately, most current browsers seem incapable of properly rendering CSS font weights. On the PC, IE6, IE7, Firefox, Opera, and Safari all fail. I hope this will change in the future.

Font Weight Percentages

The top block tests font-weight percentages on text of uniform size. Notice the jump in font weight at 600%.

Font Weight = 100

Font Weight = 200

Font Weight = 300

Font Weight = 400

Font Weight = 500

Font Weight = 600

Font Weight = 700

Font Weight = 800

Font Weight = 900

Font Weight Descriptor

This block tests font weight with standard descriptors. Most browsers supply rendering support for normal and bold.

Font Weight = Lighter

Font Weight = Normal

Font Weight = Bold

Font Weight = Bolder

Font Size

This block tests the effect of font size. Notice the apparent jumps in weight at 18 and 28 pixels. Letters get heavier with size, but browsers may add a little extra weight at key points to provide the effect of headlines and subject headings.

Font Size = 12px

Font Size = 14px

Font Size = 16px

Font Size = 18px

Font Size = 20px

Font Size = 22px

Font Size = 24px

Font Size = 26px

Font Size = 28px

Font Weight Percentages and Size

By far the most interesting test, varying both size and weight at the same time. Notice jumps in weight at 18px, 22px, and 24 px with font weights as marked. If the browser rendered font weights correctly, this would be a smooth progression from small and light to large and heavy.

Font Weight = 100, Size = 12px

Font Weight = 200, Size = 14px

Font Weight = 300, Size = 16px

Font Weight = 400, Size = 18px

Font Weight = 500, Size = 20px

Font Weight = 600, Size = 22px

Font Weight = 700, Size = 24px

Font Weight = 800, Size = 26px

Font Weight = 900, Size = 28px

Font Weight Demo

You can use this demo to test the capabilities of your browser.