Examples
String Values
Normal
b
Literal Number Values
thin: 100
book: 400
semibold: 500
bold: 600
heavy: 700
ultrabold: 900
Previous
TrackingNext
Font FamilyReference
MDN - Font Weight
/*
FONT WEIGHT
*/
.normal { font-weight: normal; }
.b { font-weight: bold; }
.thin { font-weight: 100; }
.book { font-weight: 400; }
.semibold { font-weight: 500; }
.bold { font-weight: 600; }
.heavy { font-weight: 700; }
.ultrabold{ font-weight: 900; }
@media (--breakpoint-not-small) {
.normal-ns { font-weight: normal; }
.b-ns { font-weight: bold; }
.thin-ns { font-weight: 100; }
.book-ns { font-weight: 400; }
.semibold-ns { font-weight: 500; }
.bold-ns { font-weight: 600; }
.heavy-ns { font-weight: 700; }
.ultrabold-ns { font-weight: 900; }
}
@media (--breakpoint-medium) {
.normal-m { font-weight: normal; }
.b-m { font-weight: bold; }
.thin-m { font-weight: 100; }
.book-m { font-weight: 400; }
.semibold-m { font-weight: 500; }
.bold-m { font-weight: 600; }
.heavy-m { font-weight: 700; }
.ultrabold-m { font-weight: 900; }
}
@media (--breakpoint-large) {
.normal-l { font-weight: normal; }
.b-l { font-weight: bold; }
.thin-l { font-weight: 100; }
.book-l { font-weight: 400; }
.semibold-l { font-weight: 500; }
.bold-l { font-weight: 600; }
.heavy-l { font-weight: 700; }
.ultrabold-l { font-weight: 900; }
}