Typography

All font size unit is rem and default font family Arial, Helvetica, sans-serif

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat maxime velit voluptatibus doloribus ad accusantium necessitatibus eos explicabo inventore eligendi quam beatae, expedita. Impedit quae, amet autem nihil perspiciatis. Impedit.

Bolded Italicized Colored Underlined code TLDR Ctrl+R

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat maxime velit voluptatibus doloribus
ad accusantium necessitatibus eos explicabo inventore eligendi quam beatae,
expedita. Impedit quae, amet autem nihil perspiciatis. Impedit.</p>

<p>
    <strong>Bolded</strong>
    <em>Italicized</em>
    <a>Colored</a>
    <u>Underlined</u>
    <code>code</code>
    <abbr title="Too long; didn't read">TLDR</abbr>
    <kbd>Ctrl+R</kbd>
</p>

Even you can set different header style to another.

I am h2 but looks like h6!

<h2 class="h6">I am h2 but showing like h6!</h2>

Well there's also more handy things you wanna use -

I am dimmed text

<p class="dimmed">I am dimmed text</p>

List style

Unordered list

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquam tincidunt mauris eu risus.
- Quae at provident aperiam mollitia?
- Ipsum voluptatum quam nulla cumque voluptas nobis et
- Sit laudantium error optio laborum quae at provident aperiam mollitia?
Vestibulum auctor dapibus neque.

Numbered list

Perferendis pariatur, quibusdam alias similique, aliquid sed saepe!
Aliquam tincidunt mauris eu risus.
1. Ipsum voluptatum quam nulla cumque voluptas nobis et
2. Voluptas nobis et, possimus quod sapiente corporis
3. Sit laudantium error optio laborum quae at provident aperiam mollitia?
Vestibulum auctor dapibus neque.

Here is code snippets -

<ul class="list">
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.
        <ul>
            <li>Quae at provident aperiam mollitia?</li>
            <li>Ipsum voluptatum quam nulla cumque voluptas nobis et</li>
            <li>Sit laudantium error optio laborum quae at provident aperiam mollitia?</li>
        </ul>
    </li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

<ol class="list-numbered">
    <li>Perferendis pariatur, quibusdam alias similique, aliquid sed saepe!</li>
    <li>Aliquam tincidunt mauris eu risus.
        <ol>
            <li>Ipsum voluptatum quam nulla cumque voluptas nobis et</li>
            <li>Voluptas nobis et, possimus quod sapiente corporis</li>
            <li>Sit laudantium error optio laborum quae at provident aperiam mollitia?</li>
        </ol>
    </li>
    <li>Vestibulum auctor dapibus neque.</li>
</ol>

Horizontal rule

<hr>

Description list

Lorem Ipsum Today: The passage continues to see frequent usage, with Lorem Ipsum text appearing often in print, graphic and web designs.
Original Lorem Ipsum Text: Here are the original Latin passages from which Lorem Ipsum was derived, paired with their 1914 translations by H. Rackham.

<dl>
    <dt>Lorem Ipsum Today</dt>
    <dd>The passage continues to see frequent usage, with Lorem Ipsum text appearing often in print, graphic and web designs.</dd>
    <dt>Original Lorem Ipsum Text</dt>
    <dd>Here are the original Latin passages from which Lorem Ipsum was derived, paired with their 1914 translations by H. Rackham.</dd>
</dl>

Lorem Ipsum Today: The passage continues to see frequent usage, with Lorem Ipsum text appearing often in print, graphic and web designs.
Original Lorem Ipsum Text: Here are the original Latin passages from which Lorem Ipsum was derived, paired with their 1914 translations by H. Rackham.

<dl class="indented-list">
    <dt>Lorem Ipsum Today</dt>
    <dd>The passage continues to see frequent usage, with Lorem Ipsum text appearing often in print, graphic and web designs.</dd>
    <dt>Original Lorem Ipsum Text</dt>
    <dd>Here are the original Latin passages from which Lorem Ipsum was derived, paired with their 1914 translations by H. Rackham.</dd>
</dl>

Blockquote

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt. H. Rackham

<blockquote>
    Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.
    <cite>H. Rackham</cite>
</blockquote>

SASS

Reference from _typography.scss

$global-base-font-size: 100%;
$global-base-font: Arial, Helvetica, sans-serif;
$global-font-weight: normal;
$global-font-bold-weight: bold;
$text-dimmed-color: darken(map-get($colors, white), 40%);