--- layout: docs title: Typography description: Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more. group: content toc: true --- ## Global settings Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/). - Use a [native font stack]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device. - For a more inclusive and accessible type scale, we assume the browser default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed. - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the ``. - Set the global link color via `$link-color` and apply link underlines only on `:hover`. - Use `$body-bg` to set a `background-color` on the `` (`#fff` by default). These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`. ## Headings All HTML headings, `

` through `

`, are available.
Heading Example
{{ "`

`" | markdownify }} 		h1. Bootstrap heading
{{ "`

`" | markdownify }} 		h2. Bootstrap heading
{{ "`

`" | markdownify }} 		h3. Bootstrap heading
{{ "`

`" | markdownify }} 		h4. Bootstrap heading
{{ "`
`" | markdownify }} 		h5. Bootstrap heading
{{ "`
`" | markdownify }} 		h6. Bootstrap heading
{% highlight html %}

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
{% endhighlight %} `.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. {% capture example %}

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

{% endcapture %} {% include example.html content=example %} ### Customizing headings Use the included utility classes to recreate the small secondary heading text from Bootstrap 3. {% capture example %}

Fancy display heading With faded secondary text

{% endcapture %} {% include example.html content=example %} ## 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. Keep in mind these headings are not responsive by default, but it's possible to enable [responsive font sizes](#responsive-font-sizes).
Display 1
Display 2
Display 3
Display 4
{% highlight html %}

Display 1

Display 2

Display 3

Display 4

{% endhighlight %} ## Lead Make a paragraph stand out by adding `.lead`. {% capture example %}

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

{% endcapture %} {% include example.html content=example %} ## Inline text elements Styling for common inline HTML5 elements. {% capture example %}

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.

{% endcapture %} {% include example.html content=example %} `.mark` and `.small` classes are also available to apply the same styles as `` and `` while avoiding any unwanted semantic implications that the tags would bring. While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance while `` is mostly for voice, technical terms, etc. ## Text utilities Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/) and [color utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/). ## Abbreviations Stylized implementation of HTML's `` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies. Add `.initialism` to an abbreviation for a slightly smaller font-size. {% capture example %}

attr

HTML

{% endcapture %} {% include example.html content=example %} ## Blockquotes For quoting blocks of content from another source within your document. Wrap `
` around any HTML as the quote. {% capture example %}

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

{% endcapture %} {% include example.html content=example %} ### Naming a source Add a `