# Bootstrap 5 Typography > Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more. ## Global settings CoreUI for Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes](https://coreui.io/bootstrap/docs/utilities/text/). - Use a [native font stack](https://coreui.io/bootstrap/docs/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 use the browser's 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`. - 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 | | --- | --- | | `

` | h1. Bootstrap heading | | `

` | h2. Bootstrap heading | | `

` | h3. Bootstrap heading | | `

` | h4. Bootstrap heading | | `

` | h5. Bootstrap heading | | `

` | h6. Bootstrap heading | ```html

h1. CoreUI heading

h2. CoreUI heading

h3. CoreUI heading

h4. CoreUI heading

h5. CoreUI heading

h6. CoreUI heading

``` `.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. ### Customizing headings Use the included utility classes to recreate the small secondary heading text from CoreUI 3. ## 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. ```html

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

``` Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`. ```scss $display-font-sizes: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: 2.5rem ) !default; $display-font-family: null !default; $display-font-style: null !default; $display-font-weight: 300 !default; $display-line-height: $headings-line-height !default; ``` ## Lead Make a paragraph stand out by adding `.lead`. ## Inline text elements Styling for common inline HTML5 elements. Beware that those tags should be used for semantic purpose: - `` represents text which is marked or highlighted for reference or notation purposes. - `` represents side-comments and small print, like copyright and legal text. - `` represents element that are no longer relevant or no longer accurate. - `` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. If you want to style your text, you should use the following classes instead: - `.mark` will apply the same styles as ``. - `.small` will apply the same styles as ``. - `.text-decoration-underline` will apply the same styles as ``. - `.text-decoration-line-through` will apply the same styles as ``. 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, line-height, decoration and color with our [text utilities](https://coreui.io/bootstrap/docs/utilities/text/) and [color utilities](https://coreui.io/bootstrap/docs/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. ## Blockquotes For quoting blocks of content from another source within your document. Wrap `
` around any HTML as the quote. ### Naming a source The HTML spec requires that blockquote attribution be placed outside the `
`. When providing attribution, wrap your `
` in a `
` and use a `
` or a block level element (e.g., `
`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `` as well. ### Alignment Use text utilities as needed to change the alignment of your blockquote. ## Lists ### Unstyled Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well. ### Inline Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`. ### Description list alignment Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis. ## Responsive font sizes In CoreUI for Bootstrap, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page](https://coreui.io/bootstrap/docs/getting-started/rfs/) to find out how this works. ## Customization ### SASS variables Headings have some dedicated variables for sizing and spacing. ```scss $headings-margin-bottom: $spacer * .5 !default; $headings-font-family: null !default; $headings-font-style: null !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; $headings-color: inherit !default; ``` Miscellaneous typography elements covered here and in [Reboot](https://coreui.io/bootstrap/docs/content/reboot/) also have dedicated variables. ```scss $lead-font-size: $font-size-base * 1.25 !default; $lead-font-weight: 300 !default; $small-font-size: .875em !default; $sub-sup-font-size: .75em !default; // fusv-disable $text-muted: var(--cui-secondary-color) !default; // Deprecated in 5.0.0 // fusv-enable $initialism-font-size: $small-font-size !default; $blockquote-margin-y: $spacer !default; $blockquote-font-size: $font-size-base * 1.25 !default; $blockquote-footer-color: $gray-600 !default; $blockquote-footer-font-size: $small-font-size !default; $hr-margin-y: $spacer !default; $hr-color: inherit !default; // fusv-disable $hr-bg-color: null !default; // Deprecated in v4.2.6 $hr-height: null !default; // Deprecated in v4.2.6 // fusv-enable $hr-border-color: null !default; // Allows for inherited colors $hr-border-width: var(--cui-border-width) !default; $hr-opacity: .25 !default; // scss-docs-start vr-variables $vr-border-width: var(--cui-border-width) !default; // scss-docs-end vr-variables $legend-margin-bottom: .5rem !default; $legend-font-size: 1.5rem !default; $legend-font-weight: null !default; $dt-font-weight: $font-weight-bold !default; $list-inline-padding: .5rem !default; $mark-padding: .1875em !default; $mark-color: $body-color !default; $mark-bg: $yellow-100 !default; ``` ### SASS Mixins There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)](https://coreui.io/bootstrap/docs/getting-started/rfs/).