Typographic scale live
Example
Example
Heading mega
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Intro paragraph
Paragraph
LinkHTML
<h1 class="coop-t-h-mega">Heading mega</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p class="coop-t-lead-p">Intro paragraph</p>
<p>Paragraph</p>
<a href="">Link</a>
Design and content
Size | Line height | Spacing | |
---|---|---|---|
Mega | 56px | 84px | Bottom margin 16px |
H1 | 46px | 69px | Bottom margin 16px |
H2 | 32px | 48px | Bottom margin 16px |
H3 | 26px | 39px | Bottom margin 16px |
H4 | 22px | 33px | Bottom margin 16px |
H5 | 22px | 33px | Bottom margin 16px |
H6 | 16px | 33px | Bottom margin 16px |
P lead | 26px | 30px | Bottom margin 16px |
Paragraph | 20px | 30px | Bottom margin 16px |
Size | Line height | Spacing | |
---|---|---|---|
Mega | 48px | 72px | Bottom margin 8px |
H1 | 30px | 45px | Bottom margin 8px |
H2 | 26px | 39px | Bottom margin 8px |
H3 | 22px | 33px | Bottom margin 8px |
H4 | 18px | 27px | Bottom margin 8px |
H5 | 18px | 27px | Bottom margin 8px |
H6 | 18px | 27px | Bottom margin 8px | >
P lead | 22px | 33px | Bottom margin 8px |
Paragraph | 18px | 27px | Bottom margin 8px |
Suggest a pattern or change
Use this form to suggest a new pattern or a change to an existing one.