font-weight

lets take a look at the font-weight property

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

font-weight can be set to normal or bold

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.

font-weight can be set by the increment of 100

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.

font-weight can be set by any number in a variable fonts font-weight range

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.

explore all typography properties

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.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

Try it for yourself

HTML

<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.

CSS

/* 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; }

reults

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