menu
font-weight is the CSS property that specifies how thick each character of the font is displayed, depending on the font family availability.
taught by Tina May
The simplest way to specify your font-weight is by setting it to normal or bold.
font-weight:
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can set the font-weight based on the numerical value by the increment of 100. The higher the number, the thicker the font.
font-weight:
Tip: The standard convention of calling each weight is: Thin/Hairline (100); Extra Light (200); Light (300); Normal (400); Medium (500); Semibold (600); Bold (700); Extra Bold (800); and Heavy/Black (900). Keep in mind not all font families will offer all 9 weights.
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can use a variable font family, where you can get really specific by customising the thickness by increment of 1 instead of 100. You can find a lot of variable fonts on Google Fonts.
font-weight:
Tip: Each specific weight of a variable font is called an Instance.
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
<div>
<p class="style-1">Tuition is valuable. But you know what's invaluable? Intuition.</p>
<p class="style-2">I know what to do. But in a much more real sense, I had no idea what to do.</p>
<p class="style-3">You miss 100% of the shots you never take.</p>
</div>Tuition is valuable. But you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
/* Style 1 - We've included weights 300, 400, 500, 600, 700, 800 & 900*/
.style-1 { font-family: 'Proxima Nova'; font-weight: 300; }
/* Style 2 - We've included variable weights from 300 to 800 that you can change by increment of 1*/
.style-2 { font-family: 'Open Sans'; font-weight: 600; }
/* Style 3 - We've only included weight 400*/
.style-3 { font-family: 'Playfair Display'; font-weight: 400; }
Try changing the font weight of each of the following elements, below we’ve put 3 paragraphs with a class of ‘style-1’ ‘style-2’ and ‘style-3’.
See the comments above each CSS declaration for which font-weights have been included in the font files, and test out what happens when you include a font-weight that isn’t included.
Copyright 2023