<h2 class="toc">Text size</h2>
<p><code>.h1</code>, <code>.h2</code>, etc. make fonts larger and bold. They have the same styles as <code>h1</code>, <code>h2</code>, etc.</p>
<p><code>.sm1</code>, <code>.sm2</code>, etc. make fonts smaller. These are utility classes that can be combined with other classes.</p>

{% apply view_source %}
<div class="h1">.h1 &raquo;
  <span class="sm1">.sm1</span> <span class="sm2">.sm2</span>  <span class="sm3">.sm3</span>
  <span class="sm4">.sm4</span> <span class="sm5">.sm5</span>  <span class="sm6">.sm6</span>
</div>
{% end %}
{% apply view_source %}
<div class="h2">.h2 &raquo;
  <span class="sm1">.sm1</span> <span class="sm2">.sm2</span>  <span class="sm3">.sm3</span>
  <span class="sm4">.sm4</span> <span class="sm5">.sm5</span>  <span class="sm6">.sm6</span>
</div>
{% end %}
{% apply view_source %}
<div class="h3">.h3 &raquo;
  <span class="sm1">.sm1</span> <span class="sm2">.sm2</span>  <span class="sm3">.sm3</span>
  <span class="sm4">.sm4</span> <span class="sm5">.sm5</span>  <span class="sm6">.sm6</span>
</div>
{% end %}
{% apply view_source %}
<div class="h4">.h4 &raquo;
  <span class="sm1">.sm1</span> <span class="sm2">.sm2</span>  <span class="sm3">.sm3</span>
  <span class="sm4">.sm4</span> <span class="sm5">.sm5</span>  <span class="sm6">.sm6</span>
</div>
{% end %}
{% apply view_source %}
<div class="h5">.h5 &raquo;
  <span class="sm1">.sm1</span> <span class="sm2">.sm2</span>  <span class="sm3">.sm3</span>
  <span class="sm4">.sm4</span> <span class="sm5">.sm5</span>  <span class="sm6">.sm6</span>
</div>
{% end %}
{% apply view_source %}
<div class="h6">.h6 &raquo;
  <span class="sm1">.sm1</span> <span class="sm2">.sm2</span>  <span class="sm3">.sm3</span>
  <span class="sm4">.sm4</span> <span class="sm5">.sm5</span>  <span class="sm6">.sm6</span>
</div>
{% end %}
{% apply view_source %}
<div>Normal
  <span class="sm1">.sm1</span>
  <span class="sm2">.sm2</span>
  <span class="sm3">.sm3</span>
  <span class="sm4">.sm4</span>
  <span class="sm5">.sm5</span>
  <span class="sm6">.sm6</span>
</div>
{% end %}


<h2 class="toc">Text alignment</h2>
<p><code>.text-middle</code> vertically centers text in a block.</p>
<!-- htmllint tag-bans="off" -->
{% apply view_source %}
<div class="d-flex">
  <div class="text-middle h1 mr-2 p-2 bg-warning"><div>H1 text</div><div>centered</div></div>
  <div class="text-middle h2 mr-2 p-2 bg-warning"><div>H2 text</div><div>centered</div></div>
  <div class="text-middle h3 mr-2 p-2 bg-warning"><div>H3 text</div><div>centered</div></div>
  <div class="text-middle h4 mr-2 p-2 bg-warning"><div>H4 text</div><div>centered</div></div>
  <div class="text-middle h5 mr-2 p-2 bg-warning"><div>H5 text</div><div>centered</div></div>
  <div class="text-middle h6 mr-2 p-2 bg-warning"><div>H6 text</div><div>centered</div></div>
</div>
<!-- htmllint tag-bans="$previous" -->
{% end %}


<h2 class="toc">Letter spacing</h2>
<p>The <code>.ls-*</code> classes set the letter spacing.</p>
<p>The <code>.ls-n*</code> classes set negative letter spacing.</p>

{% apply view_source %}
<div class="text-uppercase">
  <div class="ls-1"><code>.ls-1</code> have small positive letter spacing.</div>
  <div class="ls-2"><code>.ls-2</code> have medium positive letter spacing.</div>
  <div class="ls-3"><code>.ls-3</code> have large positive letter spacing.</div>
  <div class="ls-4"><code>.ls-4</code> have extra positive negative letter spacing.</div>
  <div>This is normal letter spacing.</div>
  <div class="ls-n1"><code>.ls-n1</code> have small negative letter spacing.</div>
  <div class="ls-n2"><code>.ls-n2</code> have medium negative letter spacing.</div>
  <div class="ls-n3"><code>.ls-n3</code> have large negative letter spacing.</div>
  <div class="ls-n4"><code>.ls-n4</code> have extra large negative letter spacing.</div>
</div>
{% end %}

<p>You can customize the letter spacings using these variables:</p>
<ul>
  <li><a href="?letter-spacing-1=0.5em#letter-spacing"><code>?letter-spacing-1=0.5em</code></a></li>
  <li><a href="?letter-spacing-2=0.5em#letter-spacing"><code>?letter-spacing-2=0.5em</code></a></li>
  <li><a href="?letter-spacing-n3=-0.3em#letter-spacing"><code>?letter-spacing-n3=-0.3em</code></a></li>
  <li><a href="?letter-spacing-n4=-0.3em#letter-spacing"><code>?letter-spacing-n4=-0.3em</code></a></li>
</ul>


<h2 class="toc">Line height</h2>
<p>The <code>.lh-*</code> classes set the line height.</p>

{% apply view_source %}
<div class="row">
  <div class="col-md lh-1"><code>.lh-1</code>. Default: 1. Here is some sample text for reference.</div>
  <div class="col-md lh-2"><code>.lh-2</code>. Default: 1.1. Here is some sample text for reference.</div>
  <div class="col-md lh-3"><code>.lh-3</code>. Default 1.25. Here is some sample text for reference.</div>
  <div class="col-md">Normal. Default: 1.5. Here is some sample text for reference.</div>
  <div class="col-md lh-4"><code>.lh-4</code>. Default: 2. Here is some sample text for reference.</div>
</div>
{% end %}

<p>You can customize the line heights using these variables:</p>
<ul>
  <li><a href="?line-height-1=1.8#line-height"><code>?line-height-1=1.8</code></a></li>
  <li><a href="?line-height-2=1.8#line-height"><code>?line-height-2=1.8</code></a></li>
  <li><a href="?line-height-3=1.8#line-height"><code>?line-height-3=1.8</code></a></li>
  <li><a href="?line-height-4=1.8#line-height"><code>?line-height-4=1.8</code></a></li>
</ul>

<h2 class="toc">Text shadow</h2>
<p><code>.text-shadow</code> adds a text shadow to inline text.</p>
{% apply view_source %}
<h3 class="text-shadow">.text-shadow <small class="text-shadow-none">.text-shadow-none</small></h3>
{% end %}
