Typography
Documentation and examples for typography, including headings, body text, lists, and more.
Headings
All HTML headings, h1 through h6, are available.
$h1-font-size: 3.5rem;
$h2-font-size: 2.8125rem;
$h3-font-size: 2rem;
$h4-font-size: 1.5rem;
$h5-font-size: 1.375rem;
$h6-font-size: 1.125rem;
<h1>H1: Doloremque magnam officia porro</h1>
<h2>H2: Doloremque magnam officia porro</h2>
<h3>H3: Doloremque magnam officia porro</h3>
<h4>H4: Doloremque magnam officia porro</h4>
<h5>H5: Doloremque magnam officia porro</h5>
<h6>H6: Doloremque magnam officia porro</h6>
Heading Classes
.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
<p class="h1">H1: Doloremque magnam officia porro</p>
<p class="h2">H2: Doloremque magnam officia porro</p>
<p class="h3">H3: Doloremque magnam officia porro</p>
<p class="h4">H4: Doloremque magnam officia porro</p>
<p class="h5">H5: Doloremque magnam officia porro</p>
<p class="h6">H6: Doloremque magnam officia porro</p>
Display Headings
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading.
Display 1 - 3.0625rem (49px)
Display 2 - 2.4375rem (39px)
Display 3 - 1.9375rem (31px)
Display 4 - 1.5625rem (25px)
Display 5 - 1.25rem (20px)
Display 6 - 1rem (16px)
<h1 class="display-1">Display 1: Doloremque magnam officia porro</h1>
<h1 class="display-2">Display 2: Doloremque magnam officia porro</h1>
<h1 class="display-3">Display 3: Doloremque magnam officia porro</h1>
<h1 class="display-4">Display 4: Doloremque magnam officia porro</h1>
<h1 class="display-5">Display 5: Doloremque magnam officia porro</h1>
<h1 class="display-6">Display 6: Doloremque magnam officia porro</h1>
Paragraphs
Standard and lead paragraph styles. Make a paragraph stand out with .lead.
<p class="lead">This is a lead paragraph. It stands out from regular paragraphs. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum, ratione asperiores debitis ducimus magnam amet.</p>
<p>Standard Paragraph: Lorem ipsum, dolor sit amet <a href="#">consectetur adipisicing elit</a>. Dolorum, ratione asperiores debitis ducimus magnam amet illo, maiores aut iure praesentium error expedita corrupti veniam quaerat sunt neque quis quia aliquid! Alias, et, ut possimus iure earum aliquid illo molestiae eaque dolorum quidem atque nemo praesentium odit, nobis fugit fuga eum eos? Numquam in facilis, veniam facere aliquam quas et asperiores?</p>