👉 Typography

<h1>h1 is the page title or publication</h1>
<h2>h2 are the titles of the listed publications</h2>
<h3>h3 are the titles of sections of an publication</h3>
<h4>h4 are the titles of subsections of an sections</h4>
<h5>h5 are the titles of categories of an subsection</h5>
<h6>h6 are the titles of subcategories of an category</h6>

h1 is the page title or publication

h2 are the titles of the listed publications

h3 are the titles of sections of an publication

h4 are the titles of subsections of an sections

h5 are the titles of categories of an subsection

h6 are the titles of subcategories of an category

<p>This is the text of a paragraph. This is the text of a paragraph. This is the text of a paragraph. This is the text
    of a paragraph. This is the text of a paragraph. This is the text of a paragraph. This is the text of a paragraph.
</p>
<small>This is a small text.</small>

This is the text of a paragraph. This is the text of a paragraph. This is the text of a paragraph. This is the text of a paragraph. This is the text of a paragraph. This is the text of a paragraph. This is the text of a paragraph.

This is a small text.

<i>This is a italic text.</i>
<em>This is a emphasis colored text.</em>
<b>This is a bold text.</b>
<strong>This is a strong colored text.</strong>

This is a italic text. This is a emphasis colored text. This is a bold text. This is a strong colored text.

Vars 👇

--html-font-size-xxs: 14px;
--html-font-size-xs: 16px;
--html-font-size-s: 18px;
--html-font-size-m: 20px;
--html-font-size-l: 22px;
--html-font-size-xl: 24px;
--html-font-size-xxl: 26px;

--h1-color: var(--on-surface);
--h2-color: var(--on-surface);
--h3-color: var(--on-surface);
--h4-color: var(--on-surface);
--h5-color: var(--on-surface);
--h6-color: var(--on-surface);
--h1-font-family: "Arial";
--h2-font-family: "Verdana";
--h3-font-family: "Georgia";
--h4-font-family: "Courier New";
--h5-font-family: "Times New Roman";
--h6-font-family: "Tahoma";
--h1-font-size: 3.2rem;
--h2-font-size: 2.6rem;
--h3-font-size: 1.8rem;
--h4-font-size: 1.4rem;
--h5-font-size: 1.2rem;
--h6-font-size: 1.1rem;

--body-color: var(--on-surface);
--body-font-family: "Helvetica";
--body-font-size: 1rem;

--small-color: var(--on-surface);
--small-font-family: "Helvetica";
--small-font-size: 80%;