---
title: Typography helpers
layout: docs
theme: helpers
doc-tab: helpers
doc-subtab: helpers-typography
breadcrumb:
  - home
  - documentation
  - helpers
  - helpers-typography
---

{% assign initial_vars =
site.data.variables.utilities['initial-variables'].by_name %} {% assign sizes =
site.data.variables.utilities['derived-variables'].by_name['$sizes'].value |
split: ' ' %} {% capture thead %}
<thead>
  <tr>
    <th>Class</th>
    {% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint =
    breakpoint_hash[1] %}
    <th>
      {{ breakpoint.name }}<br />
      {% if breakpoint.id == 'mobile' %} Up to
      <code>{{ breakpoint.to }}px</code>
      {% elsif breakpoint.id == 'fullhd' %}
      <code>{{ breakpoint.from }}px</code> and above {% else %} Between
      <code>{{ breakpoint.from }}px</code> and
      <code>{{ breakpoint.to }}px</code>
      {% endif %}
    </th>
    {% endfor %}
  </tr>
</thead>
{% endcapture %} {% capture size1 %}
<td class="is-narrow has-background-danger-light">
  <code class="has-background-danger-light"
    >{{ initial_vars['$size-1'].value }}</code
  >
</td>
{% endcapture %} {% capture unchanged %}
<td class="is-narrow has-text-grey-light">unchanged</td>
{% endcapture %} {% capture left %}
<td class="is-narrow has-background-primary-light has-text-primary">
  left-aligned
</td>
{% endcapture %} {% include docs/elements/anchor.html name="Size" %}

<div class="content">
  <p>There are <strong>{{ sizes | size }} sizes</strong> to choose from:</p>
</div>

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Class</th>
      <th>Font-size</th>
      <th>Size</th>
    </tr>
  </thead>
  <tbody>
    {% for size in sizes %}
    <tr>
      {% assign key = '$size-' | append: forloop.index %}
      <td>
        <code>is-size-{{ forloop.index }}</code>
      </td>
      <td>
        <code>{{ initial_vars[key].value }}</code>
      </td>
      <td><span class="is-size-{{ forloop.index }}">Example</span></td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{% include docs/elements/anchor.html name="Responsive size" %}

<div class="content">
  <p>
    You can choose a <strong>specific</strong> size for <em>each</em> viewport
    width. You simply need to append the <strong>viewport width</strong> to the
    size modifier.
  </p>
  <p>For example, here are the modifiers for <code>$size-1</code>:</p>
</div>

<div class="table-container">
  <table class="table is-bordered">
    {{ thead }}
    <tbody>
      <tr>
        <td class="is-narrow"><code>is-size-1-mobile</code></td>
        {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged
        }}
      </tr>
      <tr>
        <td class="is-narrow"><code>is-size-1-touch</code></td>
        {{ size1 }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }}
      </tr>
      <tr>
        <td class="is-narrow"><code>is-size-1-tablet</code></td>
        {{ unchanged }} {{ size1 }} {{ size1 }} {{ size1 }} {{ size1 }}
      </tr>
      <tr>
        <td class="is-narrow"><code>is-size-1-desktop</code></td>
        {{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }} {{ size1 }}
      </tr>
      <tr>
        <td class="is-narrow"><code>is-size-1-widescreen</code></td>
        {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }}
      </tr>
      <tr>
        <td class="is-narrow"><code>is-size-1-fullhd</code></td>
        {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1
        }}
      </tr>
    </tbody>
  </table>
</div>

<div class="content">
  <p>You can use the same logic for each of the <strong>7 sizes</strong>.</p>
</div>

{% include docs/elements/anchor.html name="Alignment" %}

<div class="content">
  <p>
    You can align the text with the use of one of
    <strong>4 alignment helpers</strong>:
  </p>
</div>

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Class</th>
      <th>Alignment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>has-text-centered</code></td>
      <td>Makes the text <strong>centered</strong></td>
    </tr>
    <tr>
      <td><code>has-text-justified</code></td>
      <td>Makes the text <strong>justified</strong></td>
    </tr>
    <tr>
      <td><code>has-text-left</code></td>
      <td>Makes the text aligned to the <strong>left</strong></td>
    </tr>
    <tr>
      <td><code>has-text-right</code></td>
      <td>Makes the text aligned to the <strong>right</strong></td>
    </tr>
  </tbody>
</table>

{% include docs/elements/anchor.html name="Responsive Alignment" %}

<div class="content">
  <p>
    You can <strong>align text</strong> differently for each
    <strong>viewport width</strong>. Simply append the
    <strong>viewport width</strong> to the alignment modifier.
  </p>

  <p>For example, here are the modifiers for <code>has-text-left</code>:</p>
</div>

<div class="table-container">
  <table class="table is-bordered">
    {{ thead }}
    <tbody>
      <tr>
        <td class="is-narrow"><code>has-text-left-mobile</code></td>
        {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged
        }}
      </tr>
      <tr>
        <td class="is-narrow"><code>has-text-left-touch</code></td>
        {{ left }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }}
      </tr>
      <tr>
        <td class="is-narrow"><code>has-text-left-tablet-only</code></td>
        {{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged
        }}
      </tr>
      <tr>
        <td class="is-narrow"><code>has-text-left-tablet</code></td>
        {{ unchanged }} {{ left }} {{ left }} {{ left }} {{ left }}
      </tr>
      <tr>
        <td class="is-narrow"><code>has-text-left-desktop-only</code></td>
        {{ unchanged }} {{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged
        }}
      </tr>
      <tr>
        <td class="is-narrow"><code>has-text-left-desktop</code></td>
        {{ unchanged }} {{ unchanged }} {{ left }} {{ left }} {{ left }}
      </tr>
      <tr>
        <td class="is-narrow"><code>has-text-left-widescreen-only</code></td>
        {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ unchanged
        }}
      </tr>
      <tr>
        <td class="is-narrow"><code>has-text-left-widescreen</code></td>
        {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ left }}
      </tr>
      <tr>
        <td class="is-narrow"><code>has-text-left-fullhd</code></td>
        {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left
        }}
      </tr>
    </tbody>
  </table>
</div>

<div class="content">
  <p>
    You can use the same logic for each of the <strong>4 alignments</strong>.
  </p>
</div>

{% include docs/elements/anchor.html name="Text transformation" %}

<div class="content">
  <p>
    You can transform the text with the use of one of
    <strong>4 text transformation helpers</strong>:
  </p>
</div>

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Class</th>
      <th>Transformation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>is-capitalized</code></td>
      <td>
        Transforms <strong>the first character</strong> of each word to
        <strong>Uppercase</strong>
      </td>
    </tr>
    <tr>
      <td><code>is-lowercase</code></td>
      <td>
        Transforms <strong>all characters</strong> to <strong>lowercase</strong>
      </td>
    </tr>
    <tr>
      <td><code>is-uppercase</code></td>
      <td>
        Transforms <strong>all characters</strong> to <strong>UPPERCASE</strong>
      </td>
    </tr>
    <tr>
      <td><code>is-italic</code></td>
      <td>
        Transforms <strong>all characters</strong> to
        <strong class="is-italic">italic</strong>
      </td>
    </tr>
    <tr>
      <td>
        <code>is-underlined</code>
      </td>
      <td><strong class="is-underlined">Underlines</strong> the text</td>
    </tr>
  </tbody>
</table>

{% include docs/elements/anchor.html name="Text weight" %}

<div class="content">
  <p>
    You can transform the text weight with the use of one of
    <strong>5 text weight helpers</strong>:
  </p>
</div>

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Class</th>
      <th>Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>has-text-weight-light</code></td>
      <td>
        Transforms text weight to
        <span class="has-text-weight-light">light</span>
      </td>
    </tr>
    <tr>
      <td><code>has-text-weight-normal</code></td>
      <td>
        Transforms text weight to
        <span class="has-text-weight-normal">normal</span>
      </td>
    </tr>
    <tr>
      <td><code>has-text-weight-medium</code></td>
      <td>
        Transforms text weight to
        <span class="has-text-weight-medium">medium</span>
      </td>
    </tr>
    <tr>
      <td><code>has-text-weight-semibold</code></td>
      <td>
        Transforms text weight to
        <span class="has-text-weight-semibold">semi-bold</span>
      </td>
    </tr>
    <tr>
      <td><code>has-text-weight-bold</code></td>
      <td>
        Transforms text weight to <span class="has-text-weight-bold">bold</span>
      </td>
    </tr>
  </tbody>
</table>

{% include docs/elements/anchor.html name="Font family" %}

<div class="content">
  <p>
    You can change the font family with the use of one of
    <strong>5 font family helpers</strong>:
  </p>
</div>

{% assign font_families = 'sans-serif,monospace,primary,secondary,code' | split:
',' %}

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Class</th>
      <th>Family</th>
    </tr>
  </thead>
  <tbody>
    {% for family in font_families %}
    <tr>
      <td>
        <code>is-family-{{ family }}</code>
      </td>
      <td>Sets font family to <code>$family-{{ family }}</code></td>
    </tr>
    {% endfor %}
  </tbody>
</table>