👉 Typography

<h1>h1, ideal for the main title</h1>
<h2>h2, appropriate for important section titles.</h2>
<h3>h3, suitable for subtitles.</h3>
<h4>h4, good for sublevels in the structure</h4>
<h5>h5, useful for less important titles</h5>
<h6>h6, helpful for small subtitles</h6>

h1, ideal for the main title

h2, appropriate for important section titles.

h3, suitable for subtitles.

h4, good for sublevels in the structure

h5, useful for less important titles

h6, helpful for small subtitles

<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%;