Gralig uses rem unit for the font size. The html element has 62.5% font size which means 10px = 1rem and the main font size defined as 1.6rem(16px). You don't need complex calculation for px to rem.

As a font family we used Catamaran while developing but we didn't include it inside library.

If you want to use this font, you can import to

html

<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;600&display=swap" rel="stylesheet">

or scss

@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;600&display=swap')

or you can use whatever font you like.

Headings and Subheadings

There are two type headings. Main .gra-heading and .gra-subheading

<h1 class="gra-heading">heading</h1>
<h2 class="gra-heading">heading</h2>
<h3 class="gra-heading">heading</h3>
<h4 class="gra-heading">heading</h4>
<h5 class="gra-heading">heading</h5>
<h6 class="gra-heading">heading</h6>

<h1 class="gra-subheading">subheading</h1>
<h2 class="gra-subheading">subheading</h2>
<h3 class="gra-subheading">subheading</h3>
<h4 class="gra-subheading">subheading</h4>
<h5 class="gra-subheading">subheading</h5>
<h6 class="gra-subheading">subheading</h6>

Paragraphs

You can use three different sizes of paragraphs. You can use a normal paragraph without class, for large font use .gra-p-large, for small font use .gra-p-small

<p class="gra-p-large">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur
  dolore debitis nostrum rem inventore dicta quidem eaque delectus
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur
  dolore debitis nostrum rem inventore dicta quidem eaque delectus
</p>
<p class="gra-p-small">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur
  dolore debitis nostrum rem inventore dicta quidem eaque delectus
</p>

Texts

You can use multiple text types below.

Gralig
<span class="gra-text-secondary">Gralig</span>
<span class="gra-text-green">Gralig</span>
<span class="gra-text-yellow">Gralig</span>
<span class="gra-text-blue">Gralig</span>
<span class="gra-text-red">Gralig</span>
<span class="gra-text-muted">Gralig</span>
<mark class="gra-text-marked">Gralig</mark>
<u>Gralig</u>
<em>Gralig</em>
<del>Gralig</del>
<strong>Gralig</strong>
<code>Gralig</code>