<%= head %> <%= siteHeader %>

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

Reference

MDN - Font Weight

<%= name %>

v<%= moduleVersion %> <%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>
src/_font-weights.css

<%= srccss  %>

<%= navDocs %>
<%= siteFooter %> <%= googleAnalytics %>