Typography Helpers

<p class="is-size-1">Size 1 (3rem)</p>
<p class="is-size-2">Size 2 (2.5rem)</p>
<p class="is-size-3">Size 3 (2rem)</p>
<p class="is-size-4">Size 4 (1.5rem)</p>
<p class="is-size-5">Size 5 (1.25rem)</p>
<p class="is-size-6">Size 6 (1rem)</p>
<p class="is-size-7">Size 7 (0.75rem)</p>

<p class="is-size-1-mobile is-size-3-tablet is-size-5-desktop">
  Large on mobile, medium on tablet, smaller on desktop
</p>

<p class="is-size-4-touch is-size-2-desktop">
  Size 4 on touch devices, size 2 on desktop
</p>

<p class="has-text-centered">Centered text</p>
<p class="has-text-left">Left aligned text</p>
<p class="has-text-right">Right aligned text</p>
<p class="has-text-justified">Justified text that will stretch to fill the full width of its container with equal spacing between words.</p>

<p class="has-text-left-mobile has-text-centered-tablet">
  Left on mobile, centered on tablet+
</p>

<p class="has-text-centered-touch has-text-right-desktop">
  Centered on touch, right on desktop
</p>

<p class="has-text-weight-light">Light text (300)</p>
<p class="has-text-weight-normal">Normal text (400)</p>
<p class="has-text-weight-medium">Medium text (500)</p>
<p class="has-text-weight-semibold">Semibold text (600)</p>
<p class="has-text-weight-bold">Bold text (700)</p>
<p class="has-text-weight-extrabold">Extrabold text (800)</p>

<p class="is-capitalized">capitalized text</p>
<p class="is-lowercase">LOWERCASE TEXT</p>
<p class="is-uppercase">uppercase text</p>

<p class="is-italic">Italic text</p>
<p class="is-underlined">Underlined text</p>

<p class="is-family-primary">Primary font family</p>
<p class="is-family-secondary">Secondary font family</p>
<p class="is-family-sans-serif">Sans-serif font</p>
<p class="is-family-monospace">Monospace font for code</p>
<p class="is-family-code">Code font family</p>

<h1 class="is-size-2 has-text-centered has-text-weight-bold is-uppercase">
  Large Centered Bold Title
</h1>

<p class="is-size-5 has-text-justified has-text-weight-light is-family-serif">
  Light justified paragraph with serif font
</p>

<code class="is-size-6 is-family-monospace has-text-weight-semibold">
  Semibold monospace code
</code>

<header>
  <h1 class="is-size-1 has-text-centered has-text-weight-bold">
    Article Title
  </h1>
  <p class="is-size-6 has-text-centered has-text-weight-light is-uppercase">
    By Author Name
  </p>
</header>

<h1 class="is-size-3-mobile is-size-2-tablet is-size-1-desktop 
           has-text-centered-mobile has-text-left-desktop">
  Responsive Heading
</h1>

<pre class="is-family-code is-size-7 has-text-left">
  <code>const greeting = 'Hello World';</code>
</pre>