Typography is another concept within Bootstrap that helps in giving styles and

formats to text contents. By default, Bootstrap 4 uses 1rem(16px) as font size as

well as the line-height remains 1.5. It keeps its default font-family as "Helvetica
Neue" where Helvetica, sans-serif, Arial are used. Furthermore, all <p>
(paragraph) elements have margin-top set to 0 and margin-bottom set to
1rem(16px).

Table of Contents
1. Default Font Sizes in Bootstrap 4
2. Where Bootstrap's Typography Can Be Applied?
3. Headings in Bootstrap 4
4. Subheadings in Bootstrap 4
5. Display headings in Bootstrap 4
6. Lead in Bootstrap 4
7. Text Colors in Bootstrap 4
8. Some Other Typography Classes in Bootstrap 4

Default Font Sizes in Bootstrap 4

In Bootstrap 4, the size of the typography font is based on a rem unit of
measurement which is relative to the root HTML element. The following table
describes the font size in pixels compared to the rem.

HTML Tag / CSS Class Font Size in rem

h1, .h1 2.5rem

h2, .h2 2rem

h3, .h3 1.75rem

h4, .h4 1.5rem

h5, .h5 1.25rem

 HTML Tag / CSS Class Font Size in rem

h6, .h6 1rem

.display-1 6rem

.display-2 5.5rem

.display-3 4.5rem

.display-4 3.5rem

p 1rem

In the "rem" unit, if you are changing its size to Root, it will affect the size of all the
elements of the defined page using the "rem" unit.

Where Bootstrap's Typography Can Be Applied?

Typography can be applied for creating customized:

 Headings and Subheadings within your web content.

 Text as well as Paragraph's font color, font face, and its alignment.
 Ordered and Unordered listings.
 Any other display texts.

Headings in Bootstrap 4
There are default heading tags in HTML and Bootstrap implements styles on it.
Heading is more bold and increased font size in bootstrap 4 than the default HTML
headings.

Example:
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>

<h3> Heading 3 </h3>

<h4> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6> Run

.h1 through .h6 classes are also available, for when you want to match the font
style of a title, but can not use the corresponding HTML element.

Example:
<h1 class="h2"> Heading 1 in the size of Heading 2 </h1>

<p class="h3"> Some Heading texts </p>

Subheadings in Bootstrap 4
The concept of inline subheading will add an additional heading which will act as a
subheading for the main <hN> heading (where 'N' is any number between 1 to 6).
For this, you have to add the <small> tag as a nested tag within the head element
to get the formatting of subheading which you can see in the example below:

Example:
<h1> Heading 1 <small>SubHeading 1</small> </h1>

<h2> Heading 2 <small>SubHeading 2</small> </h2>

<h3> Heading 3 <small>SubHeading 3</small> </h3>

<h4> Heading 4 <small>SubHeading 4</small> </h4>

<h5> Heading 5 <small>SubHeading 5</small> </h5>

<h6> Heading 6 <small>SubHeading 6</small> </h6> Run

Display headings in Bootstrap 4

Display headings are different from traditional headings elements; you can use it
when you need to display a significant, slightly more opinionated title.

There are four types of display heading classes available in Bootstrap 4.

Example:
<h1 class="display-1">Display Heading 1</h1>

<h1 class="display-2">Display Heading 2</h1>

<h1 class="display-3">Display Heading 3</h1>

<h1 class="display-4">Display Heading 4</h1> Run

Lead in Bootstrap 4
Lead is used to add some emphasis to any paragraph content. It can be
implemented something like this:

Example:
<p> This is normal Text without any lead class not emphasized. </p>

<p class="lead"> Example of Lead class with paragraph showing its use to
emphasize text. </p> Run

Text Colors in Bootstrap 4

There are some reference classes available in Bootstrap 4 that are used to display
texts in different colors.

Class Name Description

.text-primary This class is used to display texts in blue color.

.text-secondary This class can be used for various purposes.

 .text-success This class can be used for various purposes.

.text-danger Red is mostly avoided in most designs because it shows danger or anger. Bu
according to your design needs.

.text-warning This class can be used for various purposes.

.text-info This class is used to display texts in blue color which is different from .text_pr

.text-light This class displays text in light colors that are not white.

.text-dark This class can be used for various purposes.

.text-muted The information is silent and is used to represent obsolete data.

.text-white This class displays text in white.

Some Other Typography Classes in Bootstrap 4

Here is a list of some other typography classes in Bootstrap 4, which can be used
in styling HTML elements.

Class Name Description

.font-weight-bold For creating bold text.

.font-weight-bolder For creating bolder text.

.font-italic For creating italic text.

.font-weight-light For creating lightweight text.

.font-weight-lighter For creating lighter weight text.

.font-weight-normal For creating normal text.

.small For creating smaller text which is comparatively 85% smaller than the size

.text-break This class helps in preventing long text from breaking design and layout.

.text-decoration-none For removing the underline from any hyperlink.

.text-justify For creating justified text.

.text-monospace For creating mono-spaced text.

.text-nowrap For creating no wrap text.

.text-lowercase For creating lowercased text.

.text-reset For resetting the text color or a link.

.text-uppercase For creating uppercased text.

.text-capitalize For creating capitalized text.