Bootstrap makes use of responsive font sizes, meaning they change sizes from the smallest viewport to viewports 1200px and wider. Unfortunately, design tools like Figma and XD don’t support responsive fonts, so a stylebook of font styles should be laid out at 3 different sizes: mobile, tablet and desktop screens.

Mobile: 393px (iPhone 16)
Tablet: 834px (iPad Pro, 11″)
Desktop: 1440px (Figma’s “Desktop” size)

Base Sizes, Type Scales and Utility Classes

For all types scales, 16px (or 1rem equalling 16px) is the base of the scale. Our sites “working” base is 1.35rem, or 21.6px. Our type scales are all generated from typescale.com.

1.35rem is currently not responsive, and this may change in the future as we get more acquainted with fluid typography.

When referring to heading sizes (<h1> through <h6> in places like a news article or other long-form content), we follow a Minor Third type scale. While in HTML, the headings should be hierarchical, they do not need to appear that way visually. To fix this, we can use one of two utility classes—.h2 and .fs-2—where the number referrers to the heading level.

Display Sizes

As Bootstrap’s documentation references,

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.

Again using Typescale.com, display sizes are generated based on the Perfect Fourth type scale by default and are utilized with .display-1—where the number referrers to the heading level.

Bonus Utility: fs-base

.fs-base is a custom utility that forces the font size to 1rem.

Here is some text at .fs-base.

Below is a bunch of nonsense to capture different font styles. Resize your browser to grab the font size at the appropriate width.

Heading Level 1 (h1, fs-1)

Below is a bunch of nonsense to capture different font styles. Resize your browser to grab the font size at the appropriate width. Below is a bunch of nonsense to capture different font styles. Resize your browser to grab the font size at the appropriate width. Below is a bunch of nonsense to capture different font styles. Resize your browser to grab the font size at the appropriate width.

H1 with Display-1 applied

Heading Level 2 (h2, fs-2)

Below is a bunch of nonsense to capture different font styles. Resize your browser to grab the font size at the appropriate width. Below is a bunch of nonsense to capture different font styles. Resize your browser to grab the font size at the appropriate width. Below is a bunch of nonsense to capture different font styles. Resize your browser to grab the font size at the appropriate width.

Display 2 (.display-2)