Why Are There Only Nine Numeric Values for the CSS font-weight Property?

The CSS font-weight property is used to specify the weight or thickness of a font. The values for the font-weight property are numeric and follow a predefined scale. This scale ranges from 100 to 900, with 100 being the lightest and 900 being the heaviest in terms of the thickness of the font. The default value is typically 400.

The limited set of numeric values (i.e., 100, 200, 300, 400, 500, 600, 700, 800, 900) reflects historical conventions in font design and categorization. The values correspond to different levels of thickness or boldness in a font.

This scale provides a reasonable level of granularity for specifying font weights. In practice, however, not all fonts have variations for every numeric value on the scale. Some fonts may only have a few specific weights available, and the browser or rendering engine will attempt to approximate the requested weight if an exact match is not available.

While the numeric scale is common, the font-weight property also accepts keyword values like "normal" and "bold", providing a more intuitive way to set font weight without explicitly specifying a numeric value.

The CSS Fonts Level 4 specification introduces variable fonts that allow for more fine-grained control over font attributes, including weight. Variable fonts can offer a continuous range of weights (between 1 and 1000) rather than being limited to the discrete values in the traditional numeric scale. This provides greater flexibility to have a more fine-grained control over the font weights.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.