General configurations

In the framework, there are few significant things set globally for the typography:

• line-height is based on golden ratio (i.e. 1.618).
• letter-spacing and word-spacing are derived using the golden ratio.
• Also, the paragraph width is derived using the golden ratio.
• By default, it uses sans-serif font for all sort of texts. (Wait what? Default font set to sans-serif, does that mean you can have serif font as well? Well, yes!)
• In this framework, Poppins is the sans-serif font, whereas the Playfair Display being used as a serif font. You can customize this as well, visit this customization section.

Headings

You can use html headings from <h1> to <h6>.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Lists

Unordered lists:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
</ul>

Ordered lists:

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
</ol>

Blockquote

<blockquote>
        If you’re curious about this, it’s a garbled quotation from Cicero’s De Finibus Bonorum et Malorum (On the Ends of Good and Bad), book 1, paragraph 32, which reads, “Neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit,” meaning, “There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.”
</blockquote>

Code

You can create inline code using <code>.

<code>&lt;code&gt;</code>

To display a keyboard input, you can use the <kbd> tag.

<kbd>ctl + ,</kbd>

To illustrate a Sample output, utilize the <samp> tag.

<samp>This is an output.</samp>

To illustrate a Sample output, utilize the <var> tag.

<var>a + b</var>

Fluid typography

The framework also provides a fluid typography feature (with no media queries). If you have a widescreen monitor (at least 1440px wide), try resizing the browser window, you'll see font size reducing without any stepping observed as you minimize the viewport width.

Contrasting typography

There are three types of fonts combination, the one you which is visible to you now is the default one, which uses sans-serif for both heading elements and other elements.

The second one uses a combination of serif and sans-serif font, heading elements i.e. h1, h2, h3, h4, h5, h6 will have serif font and others will have sans-serif font.

The third one will also use both font styles but, heading elements will have sans-serif style whereas, others will have the serif font.

To make use of it add any one of the above class to a body tag or a div tag (if you don't want it globally). The examples are shown below (here it is applied to a div tag.)

Contrasting font style 1 applied using class .contrast-style-1

<div class="contrast-style-1">
    <h3>Heading</h3>
    <p>
        If you’re curious about this, it’s a garbled quotation from Cicero’s De Finibus Bonorum et Malorum (On the Ends of Good and Bad), book 1, paragraph 32, which reads, “Neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit,” meaning, “There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.”
    </p>
</div>

Contrasting font style 2 applied using class .contrast-style-2

<div class="contrast-style-2">
    <h3>Heading</h3>
    <p>
        If you’re curious about this, it’s a garbled quotation from Cicero’s De Finibus Bonorum et Malorum (On the Ends of Good and Bad), book 1, paragraph 32, which reads, “Neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit,” meaning, “There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.”
    </p>
</div>