Typography

Customize headings and text that display across your application.

Display headings

Display headings are typically the largest text at the top of the page and can be styled to appear differently than other headings. Because of this visibility, they assist with user navigation and engagement. A page’s display name is also used in the navigation.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

  <table class="table">
    <tbody>
      <tr>
        <td class="border-top-0"><h1 class="display-1">Display 1</h1></td>
      </tr>
      <tr>
        <td class="border-top-0"><h1 class="display-2">Display 2</h1></td>
      </tr>
      <tr>
        <td class="border-top-0"><h1 class="display-3">Display 3</h1></td>
      </tr>
      <tr>
        <td class="border-top-0"><h1 class="display-4">Display 4</h1></td>
      </tr>
      <tr>
        <td class="border-top-0"><h1 class="display-5">Display 5</h1></td>
      </tr>
      <tr>
        <td class="border-top-0"><h1 class="display-6">Display 6</h1></td>
      </tr>
    </tbody>
  </table>

Headings

Use h1 through h6 elements to define HTML headings in order of importance. h1 should refer to the most important heading and h6 the least important.

Only use one h1 element per page and don’t skip levels when nesting heading ranks.

h1 - 36px/40px

h2 - 28px/36px

h3 - 24px/32px

h4 - 20px/28px

h5 - 16px/20px

h6 - 14px/20px

  <table class="table">
    <tbody>
      <tr>
        <td class="border-top-0"><h1 class="h1">h1 - 36px/40px</h1></td>
      </tr>
      <tr>
        <td class="border-top-0"><h1 class="h2">h2 - 28px/36px</h1></td>
      </tr>
      <tr>
        <td class="border-top-0"><h1 class="h3">h3 - 24px/32px</h1></td>
      </tr>
      <tr>
        <td class="border-top-0"><h1 class="h4">h4 - 20px/28px</h1></td>
      </tr>
      <tr>
        <td class="border-top-0"><h1 class="h5">h5 - 16px/20px</h1></td>
      </tr>
      <tr>
        <td class="border-top-0"><h1 class="h6">h6 - 14px/20px</h1></td>
      </tr>
    </tbody>
  </table>

Large headings

Large headings classes are available to increase heading size.

h1.large

h2.large

h3.large

h4.large

h5.large

h6.large

  <table class="table">
    <tbody>
      <tr>
        <td class="border-top-0"><h1 class="large-heading1">h1.large</h1></td>
      </tr>
      <tr>
        <td class="border-top-0"><h2 class="large-heading2">h2.large</h2></td>
      </tr>
      <tr>
        <td class="border-top-0"><h3 class="large-heading3">h3.large</h3></td>
      </tr>
      <tr>
        <td class="border-top-0"><h4 class="large-heading4">h4.large</h4></td>
      </tr>
      <tr>
        <td class="border-top-0"><h5 class="large-heading5">h5.large</h5></td>
      </tr>
      <tr>
        <td class="border-top-0"><h6 class="large-heading6">h6.large</h6></td>
      </tr>
    </tbody>
  </table>

Body text

The are seven (7) body text classes in the FMS Design System, which can be combined to create additional styles.

“normal” is the default option
“bold” adds bold font-weight
“large” increases font-size
“large bold” increases font-size and adds bold font-weight
“lead text” is used in the opening paragraph of page content
“small text” reduces the default font-size
“uppercase” displays font in all uppercase characters

Normal Text

Bold Text

Large Text

Large bold text

Lead Text

Small Text

Uppercase Text

  <table class="table">
    <tbody>
      <tr>
        <td class="border-top-0 py-1"><p class="m-0">Normal Text</p></td>
      </tr>
      <tr>
        <td class="border-top-0 py-1"><p class="font-weight-bold m-0">Bold Text</p></td>
      </tr>
      <tr>
        <td class="border-top-0 py-1"><p class="large m-0">Large Text</p></td>
      </tr>
      <tr>
        <td class="border-top-0 py-1"><p class="large font-weight-bold m-0">Large bold text</p></td>
      </tr>
      <tr>
        <td class="border-top-0 py-1"><p class="lead m-0">Lead Text</p></td>
      </tr>
      <tr>
        <td class="border-top-0 py-1"><p class="small m-0">Small Text</p></td>
      </tr>
      <tr>
        <td class="border-top-0 py-1"><p class="text-uppercase font-weight-bold m-0">Uppercase Text</p></td>
      </tr>
    </tbody>
  </table>

Button text

Button text displays in buttons or dropdowns.

  <table class="table">
    <tbody>
      <tr>
        <td class="border-top-0 py-1"><button type="button" class="btn btn-secondary">Button Text Normal</button></td>
      </tr>
      <tr>
        <td class="border-top-0 py-1"><button type="button" class="btn btn-secondary font-weight-bold">Button Text Semibold</button></td>
      </tr>
      <tr>
        <td class="border-top-0 py-1"><button type="button" class="btn btn-secondary btn-lg">Button Text Large</button></td>
      </tr>
    </tbody>
  </table>

List Text

List text allows for emphasis on important ideas presented in respective lines.

Normal Text
Bold Text
Large Text
Large Bold Text
Small Text
Uppercase Text

<ul class="list-unstyled">
  <li>Normal Text</li>
  <li class="font-weight-bold">Bold Text</li>
  <li class="large">Large Text</li>
  <li class="large font-weight-bold">Large Bold Text</li>
  <li class="small">Small Text</li>
  <li class="text-uppercase font-weight-bold">Uppercase Text</li>
</ul>

Input Text

Input text styles apply to text within input fields.

Form label text

Form feedback text

<table class="table">
  <tbody>
    <tr>
      <td class="border-top-0 py-1">
        <input type="text" class="form-control form-control-sm" value="Input text small">
      </td>
    </tr>
    <tr>
      <td class="border-top-0 py-1">
        <input type="text" class="form-control" value="Input text normal">
      </td>
    </tr>
    <tr>
      <td class="border-top-0 py-1">
        <input type="text" class="form-control form-control-lg" value="Input text large">
      </td>
    </tr>
    <tr>
      <td class="border-top-0 py-1">
        <div class="form-group">
          <label for="exampleFormControlInput1" class="py-0">Form label text</label>
          <input type="text" class="form-control">
        </div>
      </td>
    </tr>
    <tr>
      <td class="border-top-0 py-1">
        <div class="form-group">
          <input type="text" class="form-control">
          <small class="form-text text-muted d-block">Form feedback text</small>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Line Height

The line-height property specifies the height of a line of text.

Negative values aren’t allowed.

lh-1 - (100%)

lh-sm - (125%)

lh-base - (150%)

lh-lg - (200%)

Base Variables

Setting the base font size is an important step for responsive design. The base font size is determined by the font-size property of the body selector in your CSS. The FMS Design System base font size is set in rems.

$small-font-size (12px, existing bootstrap variable)

$large-font-size (16px)

$font-size-base (14px, existing bootstrap variable)

$font-size-root (16px)