CSS propertyTypography
font-weight
Sets the font weight, from thin to extra bold.
- Initial value
normal- Inherited
- Yes
- Animatable
- yes, as a number
- Applies to
- all elements
- JavaScript
element.style.fontWeight = "600"
Example
#CSS
h2 {
font-weight: 600;
}
.price {
font-weight: 800;
}Example HTML
<h2 style="font-weight: 600; margin: 0">Premium Plan</h2>
<p style="margin: 6px 0 0"><span class="price" style="font-weight: 800; font-size: 24px;">$29</span> per month</p>Preview
Definition and usage
#The font-weight property sets how heavy the characters look. It accepts the keywords normal (400) and bold (700), or numbers from 1 to 1000, most often in hundreds: 100 is very thin, 900 is very bold.
A weight only renders correctly when the font actually has that version. If it doesn’t, the browser picks the closest one available, or fakes the bold, which usually looks worse.
Variable fonts contain a smooth range of weights in a single file, so you can use any value, for example 550.
Syntax
#Syntax
font-weight: normal | bold | lighter | bolder | <number 1-1000>;Values
#Values in practice
#300
A thin, light weight.
.demo { font-weight: 300; }normal
Regular text weight.
.demo { font-weight: normal; }600
Semibold, popular in headings.
.demo { font-weight: 600; }bold
A clear, bold weight.
.demo { font-weight: bold; }900
The heaviest weight, if the font has it.
.demo { font-weight: 900; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Only include the font weights you actually use. Each one is a separate file to download, unless you’re using a variable font.
- The
<strong>tag marks the importance of content. For bold styling with no semantic meaning, use CSS instead.
Related entries
#Spotted a mistake or missing an example? Write to us.