Class | Result |
---|---|
<h1>, .h1 | font-size: 36px; |
<h2>, .h2 | font-size: 32px; |
<h3>, .h3 | font-size: 28px; |
<h4>, .h4 | font-size: 24px; |
<h5>, .h5 | font-size: 20px; |
<h6>, .h6 | font-size: 16px; |
<strong> | font-weight: bold; |
<em> | font-style: italic; |
.underline, <u> | text-decoration: underline; |
.no-underline | text-decoration: none; |
.line-through, <s> | text-decoration: line-through; |
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>
bold text underlined text italicized text
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>