Bootstrap 5 Typography: Font Size, Weight & Text Utilities Guide

Typography is one of the fastest ways to undermine a web project, and Bootstrap 5 ships with a surprisingly complete set of tools to get it right without writing custom CSS for every element. If you have ever squinted at a heading that felt slightly off, or spent ten minutes hunting the correct utility class, this guide gives you the precise answers.

Understanding the Bootstrap 5 Type Scale

Bootstrap 5 defines six heading levels and a matching set of display classes. Default heading sizes are set in rem units, which scale relative to the browser’s root font size (16px by default). This matters because rem respects user accessibility settings in a way that px values do not.

The default computed sizes are roughly as follows:

• h1: 2.5rem (40px)
• h2: 2rem (32px)
• h3: 1.75rem (28px)
• h4: 1.5rem (24px)
• h5: 1.25rem (20px)
• h6: 1rem (16px)

You can apply any heading’s visual style to a different element using the matching class (.h1 through .h6). This is useful when semantic HTML and visual hierarchy need to diverge. No DOM restructuring required.

<p class="h2">This paragraph looks like an H2 but is semantically a paragraph.</p>
<span class="h4">This span inherits H4 sizing without affecting document outline.</span>

Display Headings for Hero and Landing Sections

When standard heading sizes feel too conservative for a hero section or a full-width banner, Bootstrap 5 provides display heading classes (.display-1 through .display-6). These produce larger, lighter-weight text built for high-impact layouts. They are especially useful on startup website designs where typographic scale carries the first impression.

Display sizes range from approximately 5rem (.display-1) down to 2.5rem (.display-6), with a default font-weight of 300. That lighter weight gives them an editorial, airy quality that heavy body copy would undermine.

<h1 class="display-1">Make an Impression</h1>
<h2 class="display-4">Slightly More Measured</h2>
<p class="display-6 text-muted">Subtitle text at display scale</p>

One thing to know: Responsive Font Size (RFS) is enabled by default in Bootstrap 5. It automatically scales font sizes down on smaller viewports using a fluid calculation, so your display heading that looks correct on a desktop will not overflow on mobile without extra work on your part.

Font Size Utilities: .fs-1 Through .fs-6

Bootstrap 5 introduced a dedicated set of font-size utility classes (.fs-1 through .fs-6) that apply the same size values as the heading scale but without any font-weight or margin changes. Use these when you need to resize text without affecting its semantic role or visual weight. That distinction matters more than it seems: reaching for .h3 when you only want a size change silently adds weight and margin resets you may not want.

<p class="fs-1">Very large paragraph text</p>
<span class="fs-4">Medium-large inline text</span>
<small class="fs-6">Base size small element</small>

A practical shortcut: if you find yourself converting between pixels and rems frequently, the px to rem converter lets you calculate exact values before you commit them to a custom Sass override.

Font Weight, Style, and Line Height

Bootstrap 5 provides utility classes for the most commonly needed font-weight values. The full list as of Bootstrap 5.3 is:

• .fw-lighter: computed lighter (inherits from parent)
• .fw-light: 300
• .fw-normal: 400
• .fw-medium: 500 (added in Bootstrap 5.2)
• .fw-semibold: 600 (added in Bootstrap 5.2)
• .fw-bold: 700
• .fw-bolder: computed bolder

Font style utilities include .fst-italic and .fst-normal. Line height utilities (.lh-1 .lh-sm .lh-base .lh-lg) control spacing between lines. Tight line height suits large display headings. More generous values suit body copy. Getting this wrong is one of the more common reasons a layout feels cramped or hard to read even when the font choice itself is fine.

<p class="fw-semibold lh-base">Semibold paragraph with standard line height.</p>
<h3 class="fw-light lh-1">Light heading, tight line spacing</h3>
<p class="fst-italic fw-normal">Normal weight italic text for callouts or quotes.</p>

Text Alignment, Transform, and Decoration

Bootstrap 5 separates these concerns clearly. Text alignment utilities are responsive: .text-start, .text-center, and .text-end all accept breakpoint prefixes (e.g., .text-md-start). Centering text on mobile while left-aligning it on wider screens is a common landing page requirement, and these prefixed classes handle it without a single media query. For a deeper look at how layout choices affect conversion, see the guide on landing page design mistakes and how to fix them.

Text transform utilities include:

• .text-lowercase
• .text-uppercase
• .text-capitalize

Text decoration utilities include .text-decoration-none, .text-decoration-underline, and .text-decoration-line-through. These are especially useful for stripping default anchor underlines or adding emphasis without inline styles.

<p class="text-center text-md-start text-uppercase fw-bold">
  Centered on mobile, left-aligned on medium screens
</p>
<a href="#" class="text-decoration-none fw-semibold">Clean link with no underline</a>

Using Bootstrap 5 Typography Inside the Canvas HTML Template

Canvas bundles Bootstrap 5, so all utilities above are available out of the box. Do not load Bootstrap from a CDN alongside it; that creates conflicts with the compiled styles. The key distinction in Canvas is that font families are controlled by –cnvs-primary-font and –cnvs-secondary-font, not Bootstrap’s own font-stack variables. If you need to override the font family, target the Canvas variable, not a Bootstrap variable.

:root {
  --cnvs-primary-font: 'Inter', sans-serif;
  --cnvs-secondary-font: 'Playfair Display', serif;
}

Bootstrap’s font-size, font-weight, and text utilities still apply normally inside Canvas sections. When building layouts with Canvas Builder, the generated code uses these utilities directly so you are not left with bloated inline styles. The approach also means your typography remains consistent whether you are working on a singlepage layout or a blocksection component.

For reference on how Canvas’s design tokens interact with broader layout decisions, the complete guide to the Canvas HTML Template covers variable usage in detail.

If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.