My font has gained a lot of weight

font-weight cheat-sheet for the lazy web developer (CSS)

The CSS “font-weight” property is used to define the weight of a font, such as regular or bold.

Basically, font-weight is meant for setting the weight (boldness) of the font. Lazy web developers use hit-and-trial to figure out the suitable font-weight. Allow us to pacify your pain and save you some time.

Image: UI of medical app ramotion.com
A beautiful typography is an intricate part of any design. Observe the use of subtle variation in font-weight(boldness) to direct attention of end-user.

This article describes:

“How to best use font families that have extended weights that may range from Extra Light all the way to Extra Black”.

Here is how font-weight is defined in CSS using keywords:

font-weight:lighter
font-weight:normal
font-weight:bold
font-weight:bolder

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

But for all other weights a numerical range from 100 to 900 is used. One of the challenges with web fonts is that most web browsers do not properly support font weights other than normal & bold.

Common fonts like Arial, Helvetica, Georgia, etc. do not have weights other than 400 and 700.

The Cheat-sheet

Following list describes mappings of numeric weights to definitions:
Sample variation in font weight. (Image Source: gadgetdaily.xyz)
  • 100 Extra Light or Ultra Light
  • 200 Light or Thin
  • 300 Book or Demi
  • 400 Normal or Regular
  • 500 Medium
  • 600 Semibold, Demibold
  • 700 Bold
  • 800 Black, Extra Bold or Heavy
  • 900 Extra Black, Fat, Poster or Ultra Black

Conclusion

If you want a completely safe weight, just use font-weight: bold and accept anything the browser gives you.

If you’re the adventurous sort, you can use the 100–900 values. They’re supposed to give nine different weights, from very light to very bold. Few fonts support all nine weights, although some support four or five.

What you learnt?

  1. How to use font-weights, other than hit and trial?
  2. Compatibility Issues with font-weights other than normal and bold.

Please click the “Follow” button to learn easily via “The Bit Theories

Team Cyber Labs (Website, Facebook)