Air CSS ver. 2.3.2

Font weight

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.

A	A	A	A	A	A	A	A	A
.fw1	.fw2	.fw3	.fw4	.fw5	.fw6	.fw7	.fw8	.fw9

Mnemonics

Bases

Modifiers

Optional extensions

fw = font-weight

-normal = normal -- 400
-bold = bold -- 700

1 = thin -- 100
2 = extra-light -- 200
3 = light -- 300
4 = normal -- 400
5 = medium -- 500
6 = semi-bold -- 600
7 = bold -- 700
8 = extra-bold -- 800
9 = black -- 900

-m = medium width container
-l = large width container

Shorthand

It is possible to use the class name .b instead of .fw-bold.

Examples

<p class="fw1">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="fw2">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="fw3">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="fw-normal">The quick brown fox ...</p>
<p class="fw4">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="fw5">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="fw6">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="fw-bold">The quick brown fox ...</p>
<p class="fw7">The quick brown fox ...</p>
<p class="b">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="fw8">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

Source code

/* generate: container-rule */
.fw-normal { font-weight: 400; }
.fw-bold { font-weight: 700; }

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

.b { font-weight: 700; }
/* end generate */