diff --git a/docs/_data/sizes-list.json b/docs/_data/sizes-list.json
new file mode 100644
index 000000000..e28dea247
--- /dev/null
+++ b/docs/_data/sizes-list.json
@@ -0,0 +1,30 @@
+[
+  {
+    "name": "size-1",
+    "value": "3rem"
+  },
+  {
+    "name": "size-2",
+    "value": "2.5rem"
+  },
+  {
+    "name": "size-3",
+    "value": "2rem"
+  },
+  {
+    "name": "size-4",
+    "value": "1.5rem"
+  },
+  {
+    "name": "size-5",
+    "value": "1.25rem"
+  },
+  {
+    "name": "size-6",
+    "value": "1rem"
+  },
+  {
+    "name": "size-7",
+    "value": "0.75rem"
+  }
+]
diff --git a/docs/documentation/helpers/typography-helpers.html b/docs/documentation/helpers/typography-helpers.html
index c8a0aca57..e4beffb73 100644
--- a/docs/documentation/helpers/typography-helpers.html
+++ b/docs/documentation/helpers/typography-helpers.html
@@ -11,41 +11,48 @@
   - 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 %}
+{% assign sizes = site.data['sizes-list'] %}
+
+{% 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>
+    {% 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 %}
+{% 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 %}
+{% endcapture %}
+
+{% capture unchanged %}
 <td class="is-narrow has-text-grey-light">unchanged</td>
-{% endcapture %} {% capture left %}
+{% 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" %}
+{% endcapture %}
+
+{% include docs/elements/anchor.html name="Size" %}
 
 <div class="content">
   <p>There are <strong>{{ sizes | size }} sizes</strong> to choose from:</p>
@@ -62,14 +69,13 @@
   <tbody>
     {% for size in sizes %}
     <tr>
-      {% assign key = '$size-' | append: forloop.index %}
       <td>
-        <code>is-size-{{ forloop.index }}</code>
+        <code>is-{{ size.name }}</code>
       </td>
       <td>
-        <code>{{ initial_vars[key].value }}</code>
+        <code>{{ size.value }}</code>
       </td>
-      <td><span class="is-size-{{ forloop.index }}">Example</span></td>
+      <td><span class="is-{{ size.name }}">Example</span></td>
     </tr>
     {% endfor %}
   </tbody>