Section 5 Text

Helper classes for color, font-size, etc.

Source: text.css, line 1

Section 5.1 Text Alignment

Toggle full screen Open in new window

Left

Center

Right

Justified justified justified justified justified justified.

<p class="tal">Left</p>
<p class="tac">Center</p>
<p class="tar">Right</p>
<p class="taj" style="max-width: 160px">Justified justified justified justified justified justified.</p>
Source: text.css, line 9

Section 5.2 Text - Colors

Section 5.2.1 White

Toggle full screen Open in new window

Sample text

<p class="ca">Sample text</p>
Source: text.css, line 53

Section 5.3 Text Decoration

Toggle full screen Open in new window

None

line-through

underline

<p class="td0">None</p>
<p class="tds">line-through</p>
<p class="tdu">underline</p>
Source: text.css, line 33

Section 5.4 Font Sizes

Toggle full screen Open in new window

Sizes are based on the Golden Ratio starting at 100% and 81.25%:

1.0   (16/24)  0.8125 (13/16)
1.618 (25/32)  1.315  (21/24)
2.618 (42/48)  2.127  (34/40)
4.236 (68/72)  3.442  (55/64)

Font Size 7

Font Size 6

Font Size 5

Font Size 4

Font Size 3

Font Size 2
Font Size 1

Font Size Small

<div>
  <h1 class="f7 mv">Font Size 7</h1>
  <h1 class="f6 mv">Font Size 6</h1>
  <h2 class="f5 mv">Font Size 5</h2>
  <h3 class="f4 mv">Font Size 4</h3>
  <h4 class="f3 mv">Font Size 3</h4>
  <h5 class="f2 mv">Font Size 2</h5>
  <h6 class="f1 mv">Font Size 1</h6>
  <p class="fs mv">Font Size Small</p>
</div>
Source: text.css, line 74

Section 5.4.1 Text Size 1

Toggle full screen Open in new window

The default text size.

Sample text

<h1 class="f1">Sample text</h1>
Source: text.css, line 102

Section 5.4.2 Text Size 2

Toggle full screen Open in new window

Sample text

<h1 class="f2">Sample text</h1>
Source: text.css, line 117

Section 5.4.3 Text Size 3

Toggle full screen Open in new window

Sample text

<h1 class="f3">Sample text</h1>
Source: text.css, line 130

Section 5.4.4 Text Size 4

Toggle full screen Open in new window

Sample text

<h1 class="f4">Sample text</h1>
Source: text.css, line 143

Section 5.4.5 Text Size 5

Toggle full screen Open in new window

Sample text

<h1 class="f5">Sample text</h1>
Source: text.css, line 156

Section 5.4.6 Text Size 6

Toggle full screen Open in new window

Sample text

<h1 class="f6">Sample text</h1>
Source: text.css, line 169

Section 5.4.7 Text Size 7

Toggle full screen Open in new window

Sample text

<h1 class="f7">Sample text</h1>
Source: text.css, line 182

Section 5.4.8 Font Size Small

Toggle full screen Open in new window

Sample text

<p class="fs">Sample text<p>
Source: text.css, line 195

Section 5.5 Text - Style

Toggle full screen Open in new window

Sample text

Sample text

<p class="fsn">Sample text</p>
<p class="fsi">Sample text</p>
Source: text.css, line 208

Section 5.6 Text Weight

Toggle full screen Open in new window

Adjust the font-weight:

100

200

300

400

500

600

700

800

900

<div style="font-family: 'Avenir Next', 'Helvetica Neue', sans-serif">
  <p class="fw1">100</p>
  <p class="fw2">200</p>
  <p class="fw3">300</p>
  <p class="fw4">400</p>
  <p class="fw5">500</p>
  <p class="fw6">600</p>
  <p class="fw7">700</p>
  <p class="fw8">800</p>
  <p class="fw9">900</p>
</div>
Source: text.css, line 222