Can someone show me what’s the difference between font-weight 500 and font-weight 700 with examples?
I don’t see any difference whatsoever.
So there’s no difference in fonts you say?
(Admittedly, the default font weight is actually 400 not 500, but 700 is the step-up for bold.)
Here’s an example using Montserrat font:
Some fonts only have a couple of different weights.
4 Likes
As Gandalf says above, it depends on whether the typeface you’re using includes fonts of those various weights. So the people who created the Montserrat font in the demo above included font variations for the font sizes shown in the demo. If there’s no font variation for font-weight: 700, the browser will just use the nearest option, or maybe will just set it to bold — whether you’ve set the font weight to 600, 700, 800, 900, 1000 etc.
my typo mistake yes font weight is 400 not 500
Indeed! In CSS, a font’s thickness or boldness can be specified using the font-weight attribute. Usually, the values fall between 100 and 900, where 100 represents the lightest and 900 is the boldest.
In your instance, the text’s thickness or boldness accounts for the difference between font weight: 500 and font weight: 700.
Font weight: 500 is regarded as being in the medium or regular range.
A font-weight of 700 is regarded as bold.