Typography #

Use typography to make writing legible and beautiful.

Usage #

<h1>Heading 1 - 24px</h1>
<h2>Heading 2 - 22px</h2>
<h3>Heading 3 - 20px</h3>
<h4>Heading 4 - 18px</h4>
<h5>Heading 5 - 16px</h5>
<p>Body 1 - 14px</p>
<p class="text-s">Body 2 - 12px</p>
<small>Legals - 10px</small>

Sizes #

The default font size for the body is 14px. You can use the text-s class to use the smaller paragraph text.

You can also customize the font size changing these CSS variables:

--panda-font-size-h1

--panda-font-size-h2

--panda-font-size-h3

--panda-font-size-h4

--panda-font-size-h5

--panda-font-size-body-1

--panda-font-size-body-2

--panda-font-size-legal

Weights #

Generally, the headers have two weight variations you can use: 600 (bold) and 500 (medium). By default, they are 700 (bold).

The paragraphs have three weight variations: 500 (medium), 400 (regular) and 300 (light). By default, they are 400 (regular).

The legals are special paragraphs used with the <small> HTML tag. They have two weight variations: 400 (regular) and 300 (light). By default, they are 400 (regular).

You can change the default font weight by changing these CSS variable:

--panda-font-bold

--panda-font-medium

--panda-font-regular

--panda-font-light