Syntax
font-weight
Setting the weight of the font.
Overview
| Class | Declarations |
|---|---|
font-weight:`weight` | font-weight: `weight`;
|
font-weight:normal | font-weight: normal;
|
font:lighter | font: lighter;
|
font:bolder | font-weight: bolder;
|
font:thin | font-weight: 100;
|
font:extralight | font-weight: 200;
|
font:light | font-weight: 300;
|
font:regular | font-weight: 400;
|
font:medium | font-weight: 500;
|
font:semibold | font-weight: 600;
|
font:bold | font-weight: 700;
|
font:extrabold | font-weight: 800;
|
font:heavy | font-weight: 900;
|
Examples
Basic usage
Use tokens like font:thin, font:regular, and font:bold to set the font weight of an element.
font:thin
Elegant forms shape visual harmony.
font:extralight
Elegant forms shape visual harmony.
font:light
Elegant forms shape visual harmony.
font:regular
Elegant forms shape visual harmony.
font:medium
Elegant forms shape visual harmony.
font:semibold
Elegant forms shape visual harmony.
font:bold
Elegant forms shape visual harmony.
font:extrabold
Elegant forms shape visual harmony.
font:heavy
Elegant forms shape visual harmony.
<div class="font:thin">Elegant forms shape visual harmony.</div><div class="font:extralight">Elegant forms shape visual harmony.</div><div class="font:regular">Elegant forms shape visual harmony.</div><div class="font:medium">Elegant forms shape visual harmony.</div><div class="font:semibold">Elegant forms shape visual harmony.</div><div class="font:bold">Elegant forms shape visual harmony.</div><div class="font:extrabold">Elegant forms shape visual harmony.</div><div class="font:heavy">Elegant forms shape visual harmony.</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="font-weight:normal:hover font-weight:normal@sm font-weight:normal@dark font-weight:normal@print">…</div>