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

We also use the numeric value to define the font weight. It range from 100 to 900.

400 is the same as normal and 700 is the same as bold.

To demonstrate how to use the numeric value to change the font-weight.

<p class="normal">Normal</p>
<p class="light">Light</p>
<p class="thick">Bold</p>
<p class="range">Range</p>
<input type="range" min="100" max="900" value="100" id="myrange">
<p id="value"></p>
<script src="custom.js"></script>

We add a slider and JavaScript to control the styles

var slider = document.getElementById("myrange")
var output = document.getElementById("value")
var root = document.querySelector(':root');
output.innerHTML = slider.value