Text sizes
→Type sizes are defined in a modular scale. The base is “1 rem”. From there it get’s smaller and bigger. There are text-size classes that are matching the headlines font-sizes. With CSS vars you can customize the ‘base’ and the ‘ratio’. All text on smaller screens get’s smaller.
.text_{size}
_text-sizes.scss
HTML tag | CSS class |
---|---|
h1 |
text_xxxl |
h2 |
text_xxl |
h3 |
text_xl |
h4 |
text_l |
h5, p, td, div … | text_m |
(small) | text_s |
text_xs |
<table class="table">
<tr class="inverted">
<th>HTML tag</th>
<th>CSS class</th>
</tr>
<tr>
<td><h1>h1</h1></td>
<td class="text_xxxl">text_xxxl</td>
</tr>
<tr>
<td><h2>h2</h2></td>
<td class="text_xxl">text_xxl</td>
</tr>
<tr>
<td><h3>h3</h3></td>
<td class="text_xl">text_xl</td>
</tr>
<tr>
<td><h4>h4</h4></td>
<td class="text_l">text_l</td>
</tr>
<tr>
<td>h5, p, td, div …</td>
<td class="text_m">text_m</td>
</tr>
<tr>
<td><small data-tooltip="Actually 80%">(small)</small></td>
<td class="text_s">text_s</td>
</tr>
<tr>
<td></td>
<td class="text_xs">text_xs</td>
</tr>
</table>