Font weight

Syntax

Class
Properties
font-weight-{value}
font-weight: {value};
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;

Parameters

value
<uint32>
<div class="t1 w-full p-16 bg-c-white shadow-4"> <div class="t1 font-weight-100">font-weight-100</div> <div class="t1 font-weight-200">font-weight-200</div> <div class="t1 font-weight-300">font-weight-300</div> <div class="t1 font-weight-400">font-weight-400</div> <div class="t1 font-weight-500">font-weight-500</div> <div class="t1 font-weight-600">font-weight-600</div> <div class="t1 font-weight-700">font-weight-700</div> <div class="t1 font-weight-800">font-weight-800</div> <div class="t1 font-weight-900">font-weight-900</div> </div>
<div class="t1 w-full p-16 bg-c-white shadow-4"> <div class="t1 font-thin">font-thin</div> <div class="t1 font-extralight">font-extralight</div> <div class="t1 font-light">font-light</div> <div class="t1 font-normal">font-normal</div> <div class="t1 font-medium">font-medium</div> <div class="t1 font-semibold">font-semibold</div> <div class="t1 font-bold">font-bold</div> <div class="t1 font-extrabold">font-extrabold</div> <div class="t1 font-black">font-black</div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Font weight provided in numberic form.
t1 font-weight-700
.t1.font-weight-700 { font-weight: 700; }
Font weight in keyword form: thin
t1 font-thin
.t1.font-thin { font-weight: 100; }
Font weight in keyword form: extralight
t1 font-extralight
.t1.font-extralight { font-weight: 200; }
Font weight in keyword form: light
t1 font-light
.t1.font-light { font-weight: 300; }
Font weight in keyword form: normal
t1 font-normal
.t1.font-normal { font-weight: 400; }
Font weight in keyword form: medium
t1 font-medium
.t1.font-medium { font-weight: 500; }
Font weight in keyword form: semibold
t1 font-semibold
.t1.font-semibold { font-weight: 600; }
Font weight in keyword form: bold
t1 font-bold
.t1.font-bold { font-weight: 700; }
Font weight in keyword form: extrabold
t1 font-extrabold
.t1.font-extrabold { font-weight: 800; }
Font weight in keyword form: black
t1 font-black
.t1.font-black { font-weight: 900; }