basscss-base-typography

This module sets default typographic styles for the body, headings, paragraphs, lists, and other elements.

Base type scale

Typographic elements are normalized to a simple type scale that works well across devices. Default top and bottom margins are set for commonly-used typographic elements.

<h1>Hamburger 1</h1>
<h2>Hamburger 2</h2>
<h3>Hamburger 3</h3>
<h4>Hamburger 4</h4>
<h5>Hamburger 5</h5>
<h6>Hamburger 6</h6>

Type scale utilities

The .h1 – .h6 font-size utilities can be used to override an element’s default size.

<p class="h1">Pastrami 1</p>
<p class="h2">Pastrami 2</p>
<p class="h3">Pastrami 3</p>
<p class="h4">Pastrami 4</p>
<p class="h5">Pastrami 5</p>
<p class="h6">Pastrami 6</p>

Lists

By default, lists have bullets or numbers and padding left.

<ul>
  <li>Half-Smoke</li>
  <li>Kielbasa</li>
  <li>Bologna</li>
</ul>
<ol>
  <li>Prosciutto</li>
  <li>Andouille</li>
  <li>Bratwurst</li>
  <li>Chorizo</li>
</ol>

To remove default list styling, use .list-reset.

<ul class="list-reset">
  <li>List Reset</li>
  <li>Removes bullets</li>
  <li>Removes numbers</li>
  <li>Removes padding</li>
</ul>

To set lists inline, use utilities.

<ul class="list-reset">
  <li class="inline-block mr1">Half-Smoke</li>
  <li class="inline-block mr1">Kielbasa</li>
  <li class="inline-block mr1">Bologna</li>
  <li class="inline-block mr1">Prosciutto</li>
</ul>

Other Elements

The pre element has overflow-x set to scroll. Blockquotes and hr have default margin and padding set.

Adjust the custom properties to change the default font stack, font weights, and type scale.