Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 7

Display 8

<title outputclass="display-7">Display 7</title>
<title outputclass="display-8">Display 8</title>

Letter spacing

Text without letter spacing

Text with letter spacing

<p outputclass="display-8 text-uppercase">Text without letter spacing</p>
<p outputclass="display-8 text-uppercase ls-1">Text with letter spacing</p>
<p outputclass="display-8 text-uppercase ls-2">Text with letter spacing</p>
<p outputclass="display-8 text-uppercase ls-3">Text with letter spacing</p>
<p outputclass="display-8 text-uppercase ls-4">Text with letter spacing</p>
<p outputclass="display-8 text-uppercase ls-5">Text with letter spacing</p>
<p outputclass="display-8 text-uppercase ls-6">Text with letter spacing</p>
<p outputclass="display-8 text-uppercase ls-7">Text with letter spacing</p>
<p outputclass="display-8 text-uppercase ls-8">Text with letter spacing</p>

Web safe fonts

To access web safe fonts, use the @outputclasses below.

Arial

Brush Script MT

Courier New

Garamond

Georgia

Helvetica

Trebuchet MS

Times New Roman

Verdana

<p outputclass="font-arial">Arial</p>
<p outputclass="font-brush-script-mt">Brush Script MT</p>
<p outputclass="font-courier-new">Courier New</p>
<p outputclass="font-garamond">Garamond</p>
<p outputclass="font-georgia">Georgia</p>
<p outputclass="font-helvetica">Helvetica</p>
<p outputclass="font-trebuchet-ms">Trebuchet MS</p>
<p outputclass="font-times-new-roman">Times New Roman</p>
<p outputclass="font-verdana">Verdana</p>