Teutonic CSS

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.

Syntax: .text_{size}

SCSS: _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>