Typography
Documentation and examples for typography, including headings, body text, lists, and more.
Headings
All HTML headings, h1 through h6, are available.
<h1>H1: Doloremque magnam officia exercitationem porro accusantium</h1>
<h2>H2: Doloremque magnam officia exercitationem porro accusantium</h2>
<h3>H3: Doloremque magnam officia exercitationem porro accusantium</h3>
<h4>H4: Doloremque magnam officia exercitationem porro accusantium</h4>
<h5>H5: Doloremque magnam officia exercitationem porro accusantium</h5>
<h6>H6: Doloremque magnam officia exercitationem porro accusantium</h6>
.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 exercitationem porro accusantium</p>
<p class="h2">H2: Doloremque magnam officia exercitationem porro accusantium</p>
<p class="h3">H3: Doloremque magnam officia exercitationem porro accusantium</p>
<p class="h4">H4: Doloremque magnam officia exercitationem porro accusantium</p>
<p class="h5">H5: Doloremque magnam officia exercitationem porro accusantium</p>
<p class="h6">H6: Doloremque magnam officia exercitationem porro accusantium</p>
Sub-headings
<h1>
Excepteur sint occaecat cupidatat non proident
<span class="subhead">Duis aute irure dolor</span>
</h1>
<h2>
Excepteur sint occaecat cupidatat non proident
<span class="subhead">Duis aute irure dolor</span>
</h2>
<h3>
Excepteur sint occaecat cupidatat non proident
<span class="subhead">Duis aute irure dolor</span>
</h3>
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>