font-weight thin example.

CSS font-weight Thin

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 1 min read

In CSS, to make the font-weight thin or lighter, you can use any value of 100, 200, or 300 or a lighter keyword for the CSS font-weight property. Following are the more details:

CSS font-weight Syntax

font-weight: numeric value;
/* or lighter keyword */
font-weight: lighter;

The value can be 100, 200, 300, or a lighter keyword. Below are the values are their description:

ValueDescription
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light

font-weight Thin Example

The below CSS code will make the text thinner for class light:

.light {
  font-weight: 100;
}

And in the below example, the paragraph text will be set to lighter:

p {
  font-weight: lighter;
}

Read Also: