Tachyons

Docs

/

Typography

/

Font Weights

Version
2.1.0
Filesize
228 B
Declarations
32
Selectors
32
Max. Specificity Score
10
Size of Avg. Rule
1

Single purpose classes to set the font-weight of any element at any breakpoint.

Class names have been chosen based on typographic naming conventions.

Examples

String Values

Normal

b

Literal Number Values

thin: 100

book: 400

semibold: 500

bold: 600

heavy: 700

ultrabold: 900

Previous

Tracking

Reference

MDN - Font Weight
src/_font-weights.css

/*

   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; }
}


Docs

General

Debugging Images