export const meta =  {
  title: 'Font Weight / Typography / Docs / TACHYONS',
  modules: ['tachyons-font-weight'],
  subNav: 'typography',
  editUrl: 'https://github.com/tachyons-css/tachyons/edit/master/docs/typography/font-weight.md'
}

# 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

```.html
<p class="normal f4 f3-m">Font-weight: normal</p>
<p class="b f4 f3-m">Font-weight: bold</p>
```

### Number values

```.html
<p class="fw1 f4 f3-m">Font-weight: 100</p>
<p class="fw2 f4 f3-m">Font-weight: 200</p>
<p class="fw3 f4 f3-m">Font-weight: 300</p>
<p class="fw4 f4 f3-m">Font-weight: 400</p>
<p class="fw5 f4 f3-m">Font-weight: 500</p>
<p class="fw6 f4 f3-m">Font-weight: 600</p>
<p class="fw7 f4 f3-m">Font-weight: 700</p>
<p class="fw8 f4 f3-m">Font-weight: 800</p>
<p class="fw9 f4 f3-m">Font-weight: 900</p>
```
