Lately I’ve been doing a lot of front-end UI work and in doing so there have been situations where I want to call attention to a piece of text. Sometimes displaying the text in a BOLD font-weight is just right, but other times that feels more like cracking a nut with a sledge hammer. CSS has supported a more granular approach to the font-weight attribute for some time but it’s a feature that can be easily forgotten. In addition to normal, bold, and italics designations, you can use relative terms like “lighter” or “bolder” which apply the weight relative to the parent element. Perhaps more useful is the numeric designations available. CSS supports font-weight’s of 100 to 900 in even increments of 100. The catch is that the font you are using needs to support that level of granularity.
I had planned to code out a whole series of examples but I found an article that has already done this so no need to go through that exercise. Read here to see examples of what this looks like and more details on how it’s applied to fonts that only support the normal and bold font-weights.