---
title: Typography helpers
layout: documentation
-hide_categories: true
doc-tab: modifiers
doc-subtab: typography-helpers
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>
<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>
</p>
</div>
-{% include layout/main-close.html show_categories=true %}
-<div class="container">
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
</tbody>
</table>
</div>
-</div>
-{% include layout/main-open.html %}
<div class="content">
<p>
</p>
</div>
-{% include layout/main-close.html %}
-<div class="container">
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
</tbody>
</table>
</div>
-</div>
-{% include layout/main-open.html %}
{% include elements/anchor.html name="Text transformation" %}