Responsive font size is a handy and important feature of Bootstrap 5. It allows text to scale more naturally and read nicely on all screen sizes. They ensure your website or application looks great and remains readable across different devices, automatically adjusting the font size to fit the screen. Users won't have to zoom in or strain their eyes to read your content. Additionally, using responsive font sizes saves you time and effort in development, as you can rely on pre-defined classes instead of writing complex code.

Here are some commonly used utility classes for responsive font size:

HTML Headings

The font sizes for headings (from <h1> to <h6>) use a responsive font scale that adjusts based on the viewport width. Here's an overview of the default font sizes for headings:

HTML Elements & Classes,	Font Size on screen less than 1200px	Font Size on screen more than 1200px
H1, .h1	1.375rem + 1.5vw	2.5rem
H2, .h2	1.325rem + 0.9vw	2rem
H3, .h3	1.3rem + 0.6vw	1.75rem
H4, .h4	1.275rem + 0.3vw	1.5rem
H5, .h5	1.25rem	1.25rem
H6, .h6	1rem	1rem

By default, it provides responsive font sizes for headings h1 to h4. It means that the font sizes of these headings will automatically adjust based on the screen size. However, headings h5 and h6 have fixed font sizes and do not follow the responsive font scale.

Example

Here's an example of how you can create responsive headings:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

In addition to using the basic HTML elements, It offers the flexibility to apply the .h1 through .h6 classes to other HTML elements. It allows you to achieve consistent heading font sizes and styles without using the associated HTML tags.

For example, if you want to apply the same font size and style as an h2 heading to a div element, you can use the .h2 class:

<div class="h2">This is a heading-styled div</div>

The .h1 through .h6 classes provide the corresponding font sizes and font styles, maintaining consistency with the headings of the same level, and responsive font scale ensures that the font sizes of the headings maintain a harmonious and consistent scaling across different devices and view-port sizes.

Display Heading/Text

Display headings are used for larger headings and display text. Using these classes, you can create attention-grabbing and visually appealing headings that adapt and scale based on different screen sizes. They are larger and more visually striking compared to regular headings. These headings automatically adjust their size to ensure optimal visibility and readability across various devices. There are six display headings/text classes available.

Display Heading Classes	Font Size on screen less than 1200px	Font Size on screen more than 1200px
.display-1	1.625rem + 4.5vw	5rem
.display-2	1.575rem + 3.9vw	4.5rem
.display-3	1.525rem + 3.3vw)	4rem
.display-4	1.475rem + 2.7vw	3.5rem
.display-5	1.425rem + 2.1vw	3rem
.display-6	1.375rem + 1.5vw	2.5rem

You can choose the appropriate display heading class based on the level of prominence and size you want for your heading. The higher the number in the class name, the smaller the font size will be.

By default, these classes define responsive font sizes and adjust them based on the view-port size. The font size decreases as the screen size decreases. It ensures that your headings look good on different devices and screen resolutions.

Example

To create responsive display headings, you can use the display text classes provided by the framework. It offers classes like .display-1, .display-2, .display-3, and .display-4, etc., for displaying different sizes of headings. Here's an example of how you can create responsive display headings:

<h1 class="display-1">Responsive Heading 1</h1>
<h2 class="display-2">Responsive Heading 2</h2>
<h3 class="display-3">Responsive Heading 3</h3>
<h4 class="display-4">Responsive Heading 4</h4>

In the example above, we use the display heading classes (.display-1, .display-2, .display-3, .display-4) to create responsive headings. These classes automatically adjust the size of the headings based on the view-port size.

Text Font Size

Bootstrap 5 provides a set of predefined classes that you can apply to your HTML elements to adjust font size without writing any CSS codes. Font-size classes are abbreviated as .fs-* and use the responsive font scale by default. By utilizing responsive font size classes, developers can ensure optimal legibility, preventing text from appearing too small on mobile devices or overly large on larger screens. There are six font sizes available.

Text Font Size Class	Font Size on screen less than 1200px	Font Size on screen more than 1200px
.fs-1	1.375rem + 1.5vw	2.5rem
.fs-2	1.325rem + 0.9vw	2rem
.fs-3	1.3rem + 0.6vw	1.75rem
.fs-4	1.275rem + 0.3vw	1.5rem
.fs-5	1.25rem	1.25rem
.fs-6	1rem	1rem

These classes follow a responsive font scale, which means the font sizes are adjusted proportionally across different screen sizes. The .fs-1 class represents the largest font size, and the size decreases progressively to .fs-6. You can choose the appropriate class based on your desired font size. Here is the example:

<p class="fs-1">This is some text with large font size</p>
<p class="fs-4">This is some text with medium font size</p>
<p class="fs-6">This is some text with small font size</p>

Conclusion

Bootstrap 5's responsive font sizes empower web developers to create captivating and user-friendly experiences. You can effortlessly adapt typography across devices by leveraging these features, ensuring readability and consistency. Embrace the flexibility of responsive font sizes to deliver outstanding user experiences on any screen size, contributing to the success of your website or application.