Typography utilities The following utilities can be used to add additional styles to texts.

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

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

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

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

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

<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>

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

<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>

Text truncate

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

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