Font size

Apply .fs-{size} to any element, where {size} can be any of:

  • 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
  • 10, 20, 30, 40, 50, 60, 70, 80, 90
  • 10, 15, 20, 25, 30, 35, 40, 45, 50
  • 22, 24, 26, 28

10px font size

18px font size

26px font size

<p class="fs-10">10px font size</p>
<p class="fs-18">18px font size</p>
<p class="fs-26">26px font size</p>

Font weight

Apply .fw-{value} to any element, where {value} can be any of: 100, 200, 300, 400, 500, 600, 700, 800, 900


Font weight: 100

Font weight: 300

Font weight: 500

<p class="fw-100">Font weight: 100</p>
<p class="fw-300">Font weight: 300</p>
<p class="fw-500">Font weight: 500</p>

Line height

Apply .lh-{size} to any element, where {size} can be any of:

  • 0, 1, 2, 3, 4, 5
  • 15, 25, 35, 45
  • 11, 12, 13, 14, 15, 16, 17, 18, 19
  • 22, 24, 26, 28

To better understanding of values, take a look at class definition of some of them:

  • .lh-1 { line-height: 1; }
  • .lh-15 { line-height: 1.5; }
  • .lh-24 { line-height: 2.4; }

Line height 1
Line height 1.8
Line height 2.8
Line height 4
<span class="lh-1">Line height 1</span><br>
<span class="lh-18">Line height 1.8</span><br>
<span class="lh-28">Line height 2.8</span><br>
<span class="lh-4">Line height 4</span>

Letter spacing

Apply .letter-spacing-{size} to any element, where {size} can be any of: 0, 1, 2, 3, 4, 5.

Please note that .ls-{size} is a short-named class for .letter-spacing-{size}.


1px letter spacing

3px letter spacing

5px letter spacing

<p class="letter-spacing-1">1px letter spacing</p>
<p class="letter-spacing-3">3px letter spacing</p>
<p class="letter-spacing-5">5px letter spacing</p>

Misc

Text truncate

Apply .text-truncate to any text element to crop your text with ellipse if it is larger than line width.


Place a sentence larger than with of the available size in the screen to see the result. Distinctively target resource-leveling outsourcing without impactful services. Rapidiously myocardinate best-of-breed paradigms for long-term high-impact.

<p class="text-truncate">Your long text</p>