Typography


The Inter font family

Inter is a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens.


Lorem, ipsum dolor.

The family features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.

Lorem, ipsum.

The family features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.

<h2 class="display-3 mb-5">The Inter font family</h2>
<p class="lead text-muted">Inter is a typeface specially [...]</p>
<hr class="my-10"/>
<div class="mb-8">
  <h4 class="mb-4">Lorem, ipsum dolor.</h4>
  <p class="text-gray-700">The family features a tall x-height to aid in readability of mixed-case [...]</p>
</div>
<div>
  <h4 class="mb-4">Lorem, ipsum.</h4>
  <p class="text-gray-700">The family features a tall x-height to aid in readability of mixed-case [...]</p>
</div>

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Display headings

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>