Back to the pattern library

Typographic scale live

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