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.

Hamburger 1

Hamburger 2

Hamburger 3

Hamburger 4

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


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

  • Half-Smoke
  • Kielbasa
  • Bologna
  1. Prosciutto
  2. Andouille
  3. Bratwurst
  4. Chorizo

Other Elements

The pre element has overflow-x set to scroll.

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

CSS Source

body {
  font-family: var(--font-family);
  line-height: var(--line-height);
  font-size: var(--body-font-size);

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  margin-top: var(--heading-margin-top);
  margin-bottom: var(--heading-margin-bottom);

p {
  margin-top: var(--paragraph-margin-top);
  margin-bottom: var(--paragraph-margin-bottom);

dl, ol, ul {
  margin-top: var(--list-margin-top);
  margin-bottom: var(--list-margin-bottom);

pre, code, samp {
  font-family: var(--monospace-font-family);
  font-size: var(--pre-font-size);

pre {
  margin-top: var(--pre-margin-top);
  margin-bottom: var(--pre-margin-bottom);
  overflow-x: scroll;

h1 { font-size: var(--h1) }
h2 { font-size: var(--h2) }
h3 { font-size: var(--h3) }
h4 { font-size: var(--h4) }
h5 { font-size: var(--h5) }
h6 { font-size: var(--h6) }

15 Rules
24 Selectors
94 Declarations
70 Properties