Bootstrap 5 Typography: Font Sizes, Weights, and Display Classes
Typography is one of the most direct levers you have over how a website feels — and Bootstrap 5 ships with a comprehensive set of utility classes that let you control font sizes, weights, and display headings without writing a single line of custom CSS. Knowing which class does what, and when to reach for each one, is the difference between a polished layout and one that looks like a first draft.
- Bootstrap 5 includes a full scale of font-size utilities (fs-1 through fs-6) that are independent of heading semantics, giving you precise control over visual hierarchy.
- Display classes (display-1 through display-6) are designed for hero headings and large marketing text — they render much larger than standard heading tags.
- Font-weight and font-style utilities let you adjust typographic emphasis inline without touching your stylesheet.
- When using Bootstrap 5 inside the Canvas HTML Template, you can layer Canvas CSS variables like –cnvs-primary-font on top of Bootstrap’s type utilities for fully branded typography.
How Bootstrap 5 Sets Up Its Typography Foundation
Bootstrap 5 uses a base font size of 16px on the <html> element and builds all its type scale from rem units, which means your typography scales predictably when users change browser font preferences. This is important in 2025 because accessibility audits increasingly flag fixed-pixel font sizes as a failure point.
The default body font stack is a system-font stack — system-ui, -apple-system, “Segoe UI”, Roboto — which loads instantly without a web font request. In practice, most projects override this via a custom font pairing, and when working inside Canvas, you do this through the –cnvs-primary-font and –cnvs-secondary-font CSS variables rather than overriding Bootstrap’s Sass variables directly.
Bootstrap 5 also resets margins on headings (h1–h6) to a consistent 0 0 0.5rem, which prevents the inconsistent browser-default spacing that used to require manual resets. Understanding these defaults saves you from fighting the cascade when you start customising.
Font Size Utilities: fs-1 Through fs-6
The fs- utilities decouple visual size from semantic meaning. You can make a <p> tag render at heading scale, or make an <h1> render at body size, purely through a class — the HTML element stays semantically correct for accessibility and SEO while the visual presentation is controlled independently.
<p class="fs-1">This paragraph renders at h1 visual size</p>
<p class="fs-2">Slightly smaller — equivalent to h2 scale</p>
<p class="fs-3">h3-scale text on a paragraph element</p>
<h3 class="fs-6">Semantically h3, but visually small</h3>The mapped sizes are: fs-1 = 2.5rem, fs-2 = 2rem, fs-3 = 1.75rem, fs-4 = 1.5rem, fs-5 = 1.25rem, fs-6 = 1rem. These mirror the default heading scale exactly, which makes it easy to reason about the relationship between your semantic structure and your visual hierarchy. If you need values outside this scale, you can use Bootstrap’s responsive font-size feature (RFS) or define custom utility classes in your project’s Sass configuration.
Display Classes for Hero and Marketing Text
When standard heading sizes are not large enough — for hero sections, landing page headlines, or full-width banners — Bootstrap 5’s display classes give you a heavier, larger type scale designed specifically for marketing contexts. This is one of the most visually impactful tools in Bootstrap’s typography toolkit.
<h1 class="display-1">The Largest Display Heading</h1>
<h2 class="display-3">A mid-scale display heading</h2>
<p class="display-6">Smallest display class — still larger than fs-1</p>The display scale runs from display-1 (5rem) down to display-6 (2.5rem), and all use a font weight of 300 by default — giving them an elegant, editorial quality rather than a heavy feel. This lighter weight at large size is a deliberate design choice: heavy weight at very large sizes can feel aggressive rather than authoritative.
For a deeper look at how large typographic elements fit into broader layout patterns, the post on grid systems and visual order in web layouts covers how type scale and grid structure work together to create hierarchy.
Font Weight, Style, and Lead Utilities
Bootstrap 5 includes a complete set of font-weight utilities that map directly to CSS font-weight values. These are essential when you need to add emphasis without switching to a different element or writing inline styles.
<p class="fw-bold">Bold text — font-weight: 700</p>
<p class="fw-semibold">Semibold — font-weight: 600</p>
<p class="fw-normal">Normal — font-weight: 400</p>
<p class="fw-light">Light — font-weight: 300</p>
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Removes italic from inherited italic</p>One frequently overlooked utility is .lead, which increases a paragraph’s font size to 1.25rem and sets font-weight to 300 — making it ideal for introductory paragraphs immediately below a hero heading. When building webinar or event pages, a well-styled lead paragraph immediately after the headline measurably improves readability and can support conversion goals. The post on webinar registration page design covers how typographic hierarchy contributes to pages that convert.
<h1 class="display-4 fw-bold">Register for the Live Webinar</h1>
<p class="lead">Join 2,000+ professionals learning how to scale their teams in 2025.</p>Text Alignment, Transform, and Truncation
Bootstrap 5 provides responsive text-alignment utilities that let you change alignment at specific breakpoints — removing the need for custom media queries in most cases.
<p class="text-start">Left-aligned text</p>
<p class="text-center">Centred text</p>
<p class="text-end">Right-aligned text</p>
<p class="text-sm-start text-md-center">
Left on small screens, centred from medium up
</p>
<p class="text-uppercase fw-semibold">uppercase label</p>
<p class="text-lowercase">FORCED TO LOWERCASE</p>
<p class="text-capitalize">first letter of each word capitalised</p>
<p class="text-truncate" style="max-width: 200px;">
This long sentence will be cut off with an ellipsis when it overflows
</p>The text-truncate class requires the element to be a block or inline-block with a defined width — something to watch for when you apply it inside flex containers. Also worth noting: text-decoration-none is a typography utility that removes underlines, commonly used on nav links and button-style anchors, and text-decoration-underline can restore underlines on elements where they have been removed by a reset.
Applying Canvas Typography Variables Over Bootstrap Classes
When working with the Canvas Builder tool or building directly in the Canvas HTML Template, Bootstrap’s typography utilities remain fully available — but Canvas layers its own CSS variable system on top. Rather than overriding Bootstrap’s Sass variables (which requires a build step), Canvas lets you customise typography through CSS variables scoped to the :root.
:root {
--cnvs-primary-font: 'Inter', sans-serif;
--cnvs-secondary-font: 'Playfair Display', serif;
}
body {
font-family: var(--cnvs-primary-font);
}
.section-heading {
font-family: var(--cnvs-secondary-font);
}This approach means you can set your brand typefaces once and let all Canvas components inherit them, while still using Bootstrap’s fs-, fw-, and display- classes for granular control within individual sections. If you want to convert a designer-specified pixel size from a mockup into rem for use alongside Bootstrap, the px to rem converter handles that quickly.
Understanding how type and grid interact is equally important — for a practical breakdown of Bootstrap’s grid system in layout contexts, see the comparison post on CSS Grid vs Bootstrap Grid.
Frequently Asked Questions
What is the difference between Bootstrap 5 heading tags and fs- utilities?
Heading tags (h1–h6) carry semantic meaning — they define document structure for screen readers and search engines. The fs-1 through fs-6 utilities only control visual size with no semantic effect. Use the right HTML element for structure, then use fs- classes to adjust the visual scale if the default heading size does not match your design.
When should I use display classes instead of heading tags?
Use display-1 through display-6 when you need text larger and lighter than standard headings — typically in hero sections, full-width banners, or large marketing callouts. They are not replacements for heading tags; they are visual modifiers you apply on top of heading tags to override the default size.
Does Bootstrap 5 include responsive typography by default?
Bootstrap 5 includes an opt-in feature called Responsive Font Sizes (RFS) that automatically scales type values down on smaller screens. It is applied to headings by default in the Bootstrap build but requires Sass compilation to customise. If you are working with a compiled Bootstrap file, you can achieve responsive scaling manually using responsive breakpoint utilities like fs-md-1.
How do I use Bootstrap typography classes inside the Canvas HTML Template?
Bootstrap 5 is bundled inside Canvas, so all Bootstrap typography utilities work out of the box — no separate CDN link needed. Apply fs-, fw-, and display- classes directly in your HTML. For brand-level font customisation, set –cnvs-primary-font and –cnvs-secondary-font in your CSS rather than overriding Bootstrap variables.
Can I combine Bootstrap font-weight utilities with Google Fonts?
Yes. Load your Google Fonts link in the <head> of your document, set the font on body or via Canvas’s –cnvs-primary-font variable, and Bootstrap’s fw-bold, fw-light, and other utilities will apply the correct font-weight values. Make sure you load all the font-weight variants you need in the Google Fonts URL — if the 300 weight is not loaded, fw-light will fall back to the nearest available weight.
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.