Typography

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

Heading	Example
`<h1></h1>`	h1 _ base17 heading
`<h2></h2>`	h2 _ base17 heading
`<h3></h3>`	h3 _ base17 heading
`<h4></h4>`	h4 _ base17 heading
`<h5></h5>`	h5 _ base17 heading
`<h6></h6>`	h6 _ base17 heading

<h1>h1 _ base17 heading</h1>
<h2>h2 _ base17 heading</h2>
<h3>h3 _ base17 heading</h3>
<h4>h4 _ base17 heading</h4>
<h5>h5 _ base17 heading</h5>
<h6>h6 _ base17 heading</h6>

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-1

.display-2

.display-3

.display-4

<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>

Customize headings

Use the included utility classes to recreate the small secondary heading text or add badges to the title.

Fancy display heading With faded secondary text

<h3>Fancy display heading <small class="text--muted">With faded secondary text</small></h3>

Mars is next Planet

<h3>Mars is next <span class="badge">Planet</span></h3>
<h3>Mars is next <span class="badge bg--secondary">Planet</span></h3>
<h3>Mars is next <span class="badge bg--success">Planet</span></h3>

Text Formate

Make a paragraph stand out by adding .text--lead.

Our planetary system is located in an outer spiral arm of the Milky Way galaxy. Our solar system consists of our star, the Sun, and everything bound to it by gravity — the planets Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus and Neptune, dwarf planets such as Pluto, dozens of moons and millions of asteroids, comets and meteoroids.

Inline text elements

Styling for common inline HTML5 element.

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.

<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><

Beware that those tags should be used for semantic purpose:

<mark>, .mark represents text which is marked or highlighted for reference or notation purposes.
<small>, .small represents side-comments and small print, like copyright and legal text.
<s>, .s represents element that are no longer relevant or no longer accurate.
<u>, .u represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
.text-decoration-underline will apply the same styles as <u>.
.text-decoration-line-through will apply the same styles as <s>.

While not shown above, feel free to use <b> and <i> in HTML5.

Text utilities

Change text alignment, transform, style, weight, line-height, decoration and color with our text utilities and color utilities.

Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

That’s one small step for man… one… giant leap for mankind.

<blockquote class="blockquote">
  <p>That’s one small step for man … one … giant leap for mankind.</p>
</blockquote>

Naming a source

The HTML spec requires that blockquote attribution be placed outside the <blockquote>. When providing attribution, wrap your <blockquote> in a <figure> and use a <figcaption> or a block level element (e.g., <p>) with the .blockquote-footer class. Be sure to wrap the name of the source work in <cite> as well.

That’s one small step for man… one… giant leap for mankind.

<figure>
  <blockquote class="blockquote">
    <p>That’s one small step for man… one… giant leap for mankind.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Neil Alden Armstrong <cite title="Source Title">21. Juli 1969</cite>
  </figcaption>
</figure>