Typography

Headings

All HTML headings, <h1> through <h6>, are available.

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text

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

Body copy

This is some text in a paragraph. The <p> tag is supported in all major browsers.

<p>
  This is some text in a paragraph. The
  <code>&lt;p&gt;</code>
  tag is supported in all major browsers.
</p>

Lead body copy

Make a paragraph stand out by adding .lead.

The first night, then, I went to sleep on the sand, a thousand miles from any human habitation. I was more isolated than a shipwrecked sailor on a raft in the middle of the ocean. Thus you can imagine my amazement, at sunrise, when I was awakened by an odd little voice. It said:

"If you please-- draw me a sheep!"
"What!"
"Draw me a sheep!"

I jumped to my feet, completely thunderstruck. I blinked my eyes hard. I looked carefully all around me. And I saw a most extraordinary small person, who stood there examining me with great seriousness. Here you may see the best potrait that, later, I was able to make of him. But my drawing is certainly very much less charming than its model.

<p>
  The first night, then, I went to sleep on the sand, a thousand miles from any
  human habitation. I was more isolated than a shipwrecked sailor on a raft in
  the middle of the ocean. Thus you can imagine my amazement, at sunrise, when I
  was awakened by an odd little voice. It said:
</p>
<p class="lead">
  "If you please-- draw me a sheep!"
  <br />
  "What!"
  <br />
  "Draw me a sheep!"
</p>
<p>
  I jumped to my feet, completely thunderstruck. I blinked my eyes hard. I
  looked carefully all around me. And I saw a most extraordinary small person,
  who stood there examining me with great seriousness. Here you may see the best
  potrait that, later, I was able to make of him. But my drawing is certainly
  very much less charming than its model.
</p>

Emphasis

Make use of HTML's default emphasis tags with lightweight styles.

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

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

<small>This line of text is meant to be treated as fine print.</small>

Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

<p>
  The following snippet of text is
  <strong>rendered as bold text</strong>
  .
</p>
<p>
  The following snippet of text is
  <b>rendered as bold text</b>
  .
</p>

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

<p>
  The following snippet of text is
  <em>rendered as italicized text</em>
  .
</p>
<p>
  The following snippet of text is
  <i>rendered as italicized text</i>
  .
</p>

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

<p class="text left">Left aligned text.</p>
<p class="text center">Center aligned text.</p>
<p class="text right">Right aligned text.</p>
<p class="text justify">Justified text.</p>

Abbreviations

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Basic abbreviation

For expanded text on long hover of an abbreviation, include the title attribute with the <abbr> element.

An abbreviation of the word attribute is attr.

<p>
  An abbreviation of the word attribute is
  <abbr title="attribute">attr</abbr>
  .
</p>

Initialism

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread.

<p>
  <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
  is the best thing since sliced bread.
</p>

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

<address>
  <strong>Twitter, Inc.</strong>
  <br />
  795 Folsom Ave, Suite 600
  <br />
  San Francisco, CA 94107
  <br />
  <abbr title="Phone">P:</abbr>
  (123) 456-7890
</address>
<address>
  <strong>Full Name</strong>
  <br />
  <a href="mailto:#">first.last@example.com</a>
</address>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
    erat a ante.
  </p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard <blockquote>.

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
    erat a ante.
  </p>
  <footer>
    Someone famous in
    <cite title="Source Title">Source Title</cite>
  </footer>
</blockquote>

Alternate displays

Add .reverse for a blockquote with right-aligned content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote class="reverse">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
    erat a ante.
  </p>
  <footer>
    Someone famous in
    <cite title="Source Title">Source Title</cite>
  </footer>
</blockquote>

Blockquote styles

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
    erat a ante.
  </p>
</blockquote>
<blockquote class="primary">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
    erat a ante.
  </p>
</blockquote>
<blockquote class="success">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
    erat a ante.
  </p>
</blockquote>
<blockquote class="info">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
    erat a ante.
  </p>
</blockquote>
<blockquote class="warning">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
    erat a ante.
  </p>
</blockquote>
<blockquote class="danger">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
    erat a ante.
  </p>
</blockquote>