Typography

Typographic system establishes scale, sizes and weight of text.

CSS Tokens SASS Tokens Style Dictionary Component Types

Typography

Typographic system establishes scale, sizes and weight of text.

Typeface

Barlow

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

1234567890'?"!"(%)[#]@/&\-+÷×=®©$€£¥¢:;,.*

Hierarchy

Use for palette of colors containing many shades.

Heading 1

Barlow / 40076px / 1.1

Almost before we knew it, we had left the ground.

Heading 2

Barlow / 50060px / 1.1

Almost before we knew it, we had left the ground.

Heading 3

Barlow / 40050px / 1.1

Almost before we knew it, we had left the ground.

Heading 4

Barlow / 40042px / 1.1

Almost before we knew it, we had left the ground.

Heading 5

Barlow / 40036px / 1.1

Almost before we knew it, we had left the ground.

Heading 6

Barlow / 40028px / 1.2

Almost before we knew it, we had left the ground.

Subheading

Barlow / 40016px / 1.2

Almost before we knew it, we had left the ground.

Heading 7

Barlow / 50020px / 1.2

Almost before we knew it, we had left the ground.

Paragraph/base

Barlow / 40018px / 1.6

Almost before we knew it, we had left the ground.

Paragraph/lg

Barlow / 40020px / 1.6

Almost before we knew it, we had left the ground.

Paragraph/sm

Barlow / 40016px / 1.6

Almost before we knew it, we had left the ground.

Paragraph/xl

Barlow / 40024px / 1.6

Almost before we knew it, we had left the ground.

Paragraph/xs

Barlow / 40014px / 1.6

Almost before we knew it, we had left the ground.