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.
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>Lists
By default, lists have bullets or numbers and padding left.
- Half-Smoke
- Kielbasa
- Bologna
- Prosciutto
- Andouille
- Bratwurst
- Chorizo
<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>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