CSS Basic: Font weight

Control the font weight by CSS

In this article, we are going to talk about the font weight.

We can make the font thicker by using the font-weight equal to “bold”. It will thinner when using the font-weight equal to “lighter”. It will become normal when font-weight is equal to “normal”.

Source code (Free coupon):

https://www.udemy.com/course/a-complete-css-course/?couponCode=33A3ECA879D08B500198

For example, if we have four paragraphs.

<p class="normal">Normal</p>
<p class="light">Light</p>
<p class="thick">Bold</p>
<p class="range">Range</p>

We use the font-family ‘Yu Gothic’, because it have lighter, normal and bold. Not all the font type can have all of these weights.

body{
font-family: 'Yu Gothic';
font-size: 50px;
}
.normal{
font-weight: normal;
}
.light{
font-weight: lighter;
}
.thick{
font-weight: bold;
}

We can see the differences between normal, light and bold.

Numeric value