Font weight
Adjust the weight of the font.
| Class | Styles |
|---|---|
.font-thin |
font-weight: 100; |
.font-extralight |
font-weight: 200; |
.font-light |
font-weight: 300; |
.font-normal |
font-weight: 400; |
.font-medium |
font-weight: 500; |
.font-semibold |
font-weight: 600; |
.font-bold |
font-weight: 700; |
.font-extrabold |
font-weight: 800; |
.font-black |
font-weight: 900; |
Example
This is set in thin font weight (100).
This is set in extra light font weight (200).
This is set in light font weight (300).
This is set in normal font weight (400).
This is set in medium font weight (500).
This is set in semibold font weight (600).
This is set in bold font weight (700).
This is set in extra bold font weight (800).
This is set in black font weight (900).
<p class="font-thin">This is set in thin font weight (100).</p>
<p class="font-extralight">This is set in extra light font weight (200).</p>
<p class="font-light">This is set in light font weight (300).</p>
<p class="font-normal">This is set in normal font weight (400).</p>
<p class="font-medium">This is set in medium font weight (500).</p>
<p class="font-semibold">This is set in semibold font weight (600).</p>
<p class="font-bold">This is set in bold font weight (700).</p>
<p class="font-extrabold">This is set in extra bold font weight (800).</p>
<p class="font-black">This is set in black font weight (900).</p>