Tachyons
v4.12.0
Type Scale Measure Line Height / Leading Tracking Font Weights Font Style Vertical Align Text Align Text Transform Text Decoration White Space Font Families

Font Weight

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

Varying the font-weight of different pieces of text can help create contrast between pieces of information. It can help call attention to a piece of content, or help to make a smaller font-size a bit more readable. In Elements of Typographic Style, Robert Bringhurst suggests we keep two things in mind when playing with font-weight. Use bold weights sparingly. Font-weight should decrease as font-size increases.

Examples

String Values

<p class="normal">Font-weight: normal</p>

Font-weight: normal

<p class="b">Font-weight: bold</p>

Font-weight: bold

Number values

<p class="fw1">Font-weight: 100</p>

Font-weight: 100

<p class="fw2">Font-weight: 200</p>

Font-weight: 200

<p class="fw3">Font-weight: 300</p>

Font-weight: 300

<p class="fw4">Font-weight: 400</p>

Font-weight: 400

<p class="fw5">Font-weight: 500</p>

Font-weight: 500

<p class="fw6">Font-weight: 600</p>

Font-weight: 600

<p class="fw7">Font-weight: 700</p>

Font-weight: 700

<p class="fw8">Font-weight: 800</p>

Font-weight: 800

<p class="fw9">Font-weight: 900</p>

Font-weight: 900

Previous

Tracking

Next

Font Family

Reference

MDN - Font Weight

tachyons-font-weight

v5.0.5 244 B
Declarations
44
Selectors
44
Max. Specificity Score
10
Size of Avg. Rule
1
src/_font-weights.css 

/*

   FONT WEIGHT
   Docs: http://tachyons.io/docs/typography/font-weight/

   Base
     fw = font-weight

   Modifiers:
     1 = literal value 100
     2 = literal value 200
     3 = literal value 300
     4 = literal value 400
     5 = literal value 500
     6 = literal value 600
     7 = literal value 700
     8 = literal value 800
     9 = literal value 900

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

.normal { font-weight: normal; }
.b      { font-weight: bold; }
.fw1    { font-weight: 100; }
.fw2    { font-weight: 200; }
.fw3    { font-weight: 300; }
.fw4    { font-weight: 400; }
.fw5    { font-weight: 500; }
.fw6    { font-weight: 600; }
.fw7    { font-weight: 700; }
.fw8    { font-weight: 800; }
.fw9    { font-weight: 900; }


@media (--breakpoint-not-small) {
  .normal-ns { font-weight: normal; }
  .b-ns      { font-weight: bold; }
  .fw1-ns    { font-weight: 100; }
  .fw2-ns    { font-weight: 200; }
  .fw3-ns    { font-weight: 300; }
  .fw4-ns    { font-weight: 400; }
  .fw5-ns    { font-weight: 500; }
  .fw6-ns    { font-weight: 600; }
  .fw7-ns    { font-weight: 700; }
  .fw8-ns    { font-weight: 800; }
  .fw9-ns    { font-weight: 900; }
}

@media (--breakpoint-medium) {
  .normal-m { font-weight: normal; }
  .b-m      { font-weight: bold; }
  .fw1-m    { font-weight: 100; }
  .fw2-m    { font-weight: 200; }
  .fw3-m    { font-weight: 300; }
  .fw4-m    { font-weight: 400; }
  .fw5-m    { font-weight: 500; }
  .fw6-m    { font-weight: 600; }
  .fw7-m    { font-weight: 700; }
  .fw8-m    { font-weight: 800; }
  .fw9-m    { font-weight: 900; }
}

@media (--breakpoint-large) {
  .normal-l { font-weight: normal; }
  .b-l      { font-weight: bold; }
  .fw1-l    { font-weight: 100; }
  .fw2-l    { font-weight: 200; }
  .fw3-l    { font-weight: 300; }
  .fw4-l    { font-weight: 400; }
  .fw5-l    { font-weight: 500; }
  .fw6-l    { font-weight: 600; }
  .fw7-l    { font-weight: 700; }
  .fw8-l    { font-weight: 800; }
  .fw9-l    { font-weight: 900; }
}