Tachyons

Docs

/

Typography

/

Font Weights

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

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