Typography

Awesome font styles for your site

Headings

<h1>H1 example heading</h1>
<h2>H2 example heading text</h2>
<h3>H3 example heading text</h3>
<h4>H4 example heading text</h4>
<h5>H5 example heading text</h5>
<h6>H6 example heading text</h6>

H1 example heading

H2 example heading text

H3 example heading text

H4 example heading text

H5 example heading text
H6 example heading text

Heading secondary text

<h1>H1 heading. <small>Secondary text</small></h1>
<h2>H2 heading. <small>Secondary text</small></h2>
<h3>H3 heading. <small>Secondary text</small></h3>
<h4>H4 heading. <small>Secondary text</small></h4>
<h5>H5 heading. <small>Secondary text</small></h5>
<h6>H6 heading. <small>Secondary text</small></h6>

H1 heading. Secondary text

H2 heading. Secondary text

H3 heading. Secondary text

H4 heading. Secondary text

H5 heading. Secondary text
H6 heading. Secondary text

Slab heading

<h1 class="slab">H1 example slab heading</h1>
<h2 class="slab">H2 example slab heading</h2>
<h3 class="slab">H3 example slab heading</h3>
<h4 class="slab">H4 example slab heading</h4>
<h5 class="slab">H5 example slab heading</h5>
<h6 class="slab">H6 example slab heading</h6>

H1 example slab heading

H2 example slab heading

H3 example slab heading

H4 example slab heading

H5 example slab heading
H6 example slab heading

Paragraph

<p class="content"><b>Paragraph example.</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
<p class="lead">Paragraph lead text.<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

Paragraph example. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Paragraph lead text.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Display

<p class="display-1">Display 1 text</p>
<p class="display-2">Display 2 text</p>
<p class="display-3">Display 3 text</p>
<p class="display-4">Display 4 text</p>
<p class="display-4-alt">Display 4 alt</p>
<p class="display-5">Display 5 text</p>

Display 1 text

Display 2 text

Display 3 text

Display 4 text

Display 4 alt

Display 5 text

Inline styles

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

An abbreviation of the word attribute is attr.

HTML is the best thing since sliced bread.

Contextual colors

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Transformation

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Lowercased text.

Uppercased text.

Capitalized text.

Dropcap

<p class="dropcap content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Addresses

<address>
  <strong>Pew-pew, Inc.</strong><br>
  1355 Lazer Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>John coffee guy</strong><br>
  <a href="mailto:[email protected]">[email protected]</a>
</address>
Pew-pew, Inc.
1355 Lazer Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
John coffee guy
[email protected]

Alignment

<h3 class="text-left">Left aligned text</h3>
<p class="content text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum</p>

<div class="spacer-tiny"></div>

<h3 class="text-center">Center aligned text</h3>
<p class="content text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum</p>

<div class="spacer-tiny"></div>

<h3 class="text-right">Right aligned text</h3>
<p class="content text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum</p>

<div class="spacer-tiny"></div>

<h3 class="text-justify">Justified text</h3>
<p class="content text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum</p>

<div class="spacer-tiny"></div>

<h3 class="text-left">No wrap</h3>
<p class="content text-nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum</p>

Left aligned text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum

Center aligned text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum

Right aligned text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum

Justified text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum

No wrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor. Nam quis mauris metus. Nunc consectetur urna vitae tellus dapibus pulvinar id non turpis. Fusce quis nunc dictum, fringilla nisi eu, bibendum ante. Donec eu aliquet elit. Nulla facilisi. Nullam dignissim imperdiet condimentum