diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html
index e08cf28e..1d5d9ffb 100644
--- a/docs/documentation/modifiers/typography-helpers.html
+++ b/docs/documentation/modifiers/typography-helpers.html
@@ -1,7 +1,6 @@
 ---
 title: Typography helpers
 layout: documentation
-hide_categories: true
 doc-tab: modifiers
 doc-subtab: typography-helpers
 breadcrumb:
@@ -12,7 +11,7 @@ breadcrumb:
 ---
 
 {% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
-{% assign sizes        = site.data.variables.utilities.derived-variables.by_name.sizes.value | split: ' ' %}
+{% assign sizes        = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %}
 
 {% capture thead %}
 <thead>
@@ -77,7 +76,8 @@ breadcrumb:
   <tbody>
 		{% for size in sizes %}
 			<tr>
-				{% assign key = 'size-' | append: forloop.index %}
+				{% assign key = '$size-' | append: forloop.index %}
+
 				<td><code>is-size-{{ forloop.index }}</code></td>
 				<td><code>{{ initial_vars[key].value }}</code></td>
 			</tr>
@@ -96,9 +96,7 @@ breadcrumb:
   </p>
 </div>
 
-{% include layout/main-close.html show_categories=true %}
 
-<div class="container">
   <div class="table-container">
     <table class="table is-bordered">
       {{ thead }}
@@ -154,9 +152,7 @@ breadcrumb:
       </tbody>
     </table>
   </div>
-</div>
 
-{% include layout/main-open.html %}
 
 <div class="content">
   <p>
@@ -257,9 +253,7 @@ breadcrumb:
   </p>
 </div>
 
-{% include layout/main-close.html %}
 
-<div class="container">
   <div class="table-container">
     <table class="table is-bordered">
       {{ thead }}
@@ -339,9 +333,7 @@ breadcrumb:
       </tbody>
     </table>
   </div>
-</div>
 
-{% include layout/main-open.html %}
 
 {% include elements/anchor.html name="Text transformation" %}