Typographic scale live

Our typographic scale creates hierarchy within our content.

Example

Example

Heading mega

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Intro paragraph

Paragraph

Link

HTML

                                    
<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 and spacing above 768px
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 and spacing below 768px
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.

Suggest a new pattern or a change