Typography

Basic building blocks of text.

Class Result
<h1>, .h1font-size: 36px;
<h2>, .h2font-size: 32px;
<h3>, .h3font-size: 28px;
<h4>, .h4font-size: 24px;
<h5>, .h5font-size: 20px;
<h6>, .h6font-size: 16px;
<strong>font-weight: bold;
<em>font-style: italic;
.underline, <u>text-decoration: underline;
.no-underlinetext-decoration: none;
.line-through, <s>text-decoration: line-through;

Usage

Many basic typography options. If you want more text control check out Text Align, Text Color, Text Size, Font Weight, and Line Height.

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<div class="h1">any tag as h1</div>
<div class="h2">any tag as h2</div>
<div class="h3">any tag as h3</div>
<div class="h4">any tag as h4</div>
<div class="h5">any tag as h5</div>
<div class="h6">any tag as h6</div>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
<strong>bold text</strong>
<u>underlined text</u>
<em>italicized text</em>
<s>strike through text</s>

h1

h2

h3

h4

h5
h6

any tag as h1

any tag as h2

any tag as h3

any tag as h4

any tag as h5
any tag as h6

bold text underlined text italicized text

strike through text

Compiled Example

Input

<h1>This is an h1</h1>
<h2>This is an h2</h2>
<h3>This is an h3</h3>
<h4>This is an h4</h4>
<h5>This is an h5</h5>
<h6>This is an h6</h6>
<strong>Bold Text</strong>
<strong>Bold Text</strong>
<u>Underlined Text</u>
<em>Italic Text</em>
<s>Strike Through Text</s>

Output

<h1 style="padding-top: 0; padding-bottom: 0; font-weight: 500; vertical-align: baseline; font-size: 36px; line-height: 43.2px; margin: 0;" align="left">This is an h1</h1>
<h2 style="padding-top: 0; padding-bottom: 0; font-weight: 500; vertical-align: baseline; font-size: 32px; line-height: 38.4px; margin: 0;" align="left">This is an h2</h2>
<h3 style="padding-top: 0; padding-bottom: 0; font-weight: 500; vertical-align: baseline; font-size: 28px; line-height: 33.6px; margin: 0;" align="left">This is an h3</h3>
<h4 style="padding-top: 0; padding-bottom: 0; font-weight: 500; vertical-align: baseline; font-size: 24px; line-height: 28.8px; margin: 0;" align="left">This is an h4</h4>
<h5 style="padding-top: 0; padding-bottom: 0; font-weight: 500; vertical-align: baseline; font-size: 20px; line-height: 24px; margin: 0;" align="left">This is an h5</h5>
<h6 style="padding-top: 0; padding-bottom: 0; font-weight: 500; vertical-align: baseline; font-size: 16px; line-height: 19.2px; margin: 0;" align="left">This is an h6</h6>
<strong>Bold Text</strong>
<strong>Bold Text</strong>
<u>Underlined Text</u>
<em>Italic Text</em>
<s>Strike Through Text</s>
On this page