Typography refers to the style, arrangement, and appearance of text on a webpage or application. It plays a crucial role in readability, user experience, and overall aesthetics. and examples for Blueprint typography, including headings, body text, lists, and more..
All HTML headings, <h1> through <h6>, are available.
| Heading | Example |
|---|---|
<h1></h1>
|
Heading 56px/38px |
<h2></h2>
|
Heading 42px/30px |
<h3></h3>
|
Heading 32px/26px |
<h4></h4>
|
Heading 22px/18px |
<h5></h5>
|
Heading 18px/14px |
<h6></h6>
|
Heading 16px/14px |
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</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.
large-text-1. Heading 56px/38px
large-text-2. Heading 42px/30px
large-text-3. Heading 32px/26px
medium-text-1. Heading 22px/18px
medium-text-2. Heading 18px/14px
small-text-1. Heading 16px/14px
small-text-2. Heading 14px/14px
<p class="large-text-1">large-text-1. Heading</p>
<p class="large-text-2">large-text-2. Heading</p>
<p class="large-text-3">large-text-3. Heading</p>
<p class="medium-text-1">medium-text-1. Heading</p>
<p class="medium-text-2">medium-text-2. Heading</p>
<p class="small-text-1">small-text-1. Heading</p>
<p class="small-text-2">small-text-2. Heading</p>