Typography

Use typography to make text beautiful.

Typography Tokens

There are five different type of tokens use to define different text size on screen.

Display
Heading
Title
Body
Label

Display

Use for large heading on a large screen.

Magical CSS

<h3 class="display-sm">Magical CSS</h3>

Type	Scale
`display-xl`	14vw
`display-lg`	12vw
`display-md`	10vw
`display`	8vw
`display-sm`	6vw
`display-xs`	4vw

Heading

Default h1 to h6 has no style. Use different heading classes.

3XL Heading

2XL Heading

XL Heading

LG Heading

MD Heading

Heading

SM Heading

XS Heading

<h3 class="heading-3xl">3XL Heading</h3>
<h3 class="heading-2xl">2XL Heading</h3>
<h3 class="heading-xl">XL Heading</h3>
<h3 class="heading-lg">LG Heading</h3>
<h3 class="heading-md">MD Heading</h3>
<h3 class="heading">Heading</h3>
<h3 class="heading-sm">SM Heading</h3>
<h3 class="heading-xs">XS Heading</h3>

Type	Default	Medium	Small
`heading-3xl`	9rem - 144px	7rem - 112px	5rem - 80px
`heading-2xl`	8rem - 128px	6rem - 96px	4rem - 64px
`heading-xl`	6rem - 96px	4rem - 64px	3rem - 48px
`heading-lg`	4rem - 64px	3rem - 48px	2.5rem - 40px
`heading-md`	3.5rem - 56px	3rem - 48px	2rem - 32px
`heading`	3rem - 48px	2.5rem - 40px	2rem - 32px
`heading-sm`	2.25rem - 36px	1.75rem - 28px	1.5rem - 24px
`heading-xs`	1.5rem - 24px	1.25rem - 20px	1.125rem - 18px

Title

Use .title for card title, section title.

title-xl

The Need To Read

title-lg

The Need To Read

title-md

The Need To Read

title

The Need To Read

title-sm

The Need To Read

title-xs

The Need To Read

<h3 class="title-xl">XL Title</h3>
<h3 class="title-lg">LG Title</h3>
<h3 class="title-md">MD Title</h3>
<h3 class="title">Title</h3>
<h3 class="title-sm">SM Title</h3>
<h3 class="title-xs">XS Title</h3>

Type	Default
`title-xl`	2rem - 32px
`title-lg`	1.875rem - 30px
`title-md`	1.75rem - 28px
`title`	1.5rem - 24px
`title-sm`	1.25rem - 20px
`title-xs`	1rem - 16px

Body

Use .body for paragraphs and main text in your site.

body-xl

In the science fiction books I read as a kid, reading had often been replaced by some more efficient way of acquiring knowledge. Mysterious "tapes" would load it into one's brain like a program being loaded into a computer. Paul G

body-lg

body-md

body

body-sm

body-xs

<p class="body-xl">XL Body</p>
<p class="body-lg">LG Body</p>
<p class="body-md">MD Body</p>
<p class="body">Body</p>
<p class="body-sm">SM Body</p>
<p class="body-xs">XS Body</p>

Type	Default	Medium
`body-xl`	1.375rem - 22px	1.25rem - 20px
`body-lg`	1.25rem - 20px	1.0625rem - 17px
`body-md`	1.0625rem - 17px	-
`body`	1rem - 16px	-
`body-sm`	0.875rem - 14px	-
`body-xs`	0.75rem - 12px	-

Label

Use .label for smaller text like in buttons, chips etc.

140K Stable New

<button class="btn btn-primary label-xl">Like</button>
<button class="btn btn-primary label-lg">Like</button>
<button class="btn btn-primary label-md">Like</button>
<span class="label">140K</span>
<span class="chip chip-info label-sm">Stable</span>
<span class="label-xs">New</span>

Type	Default
`label-xl`	1.25rem - 20px
`label-lg`	1.125rem - 18px
`label-md`	1rem - 16px
`label`	0.875rem - 14px
`label-sm`	0.75 - 12px
`label-xs`	0.625rem - 10px