Typography shapes how content is understood. The system type scale and spacing create rhythm that makes pages scannable and comfortable, even as density shifts or screen sizes change.

Bolt's typographic system is fluid by default. This works differently than most design systems, as fluid text sizing responds automatically to viewport changes without requiring manual breakpoint management. Typographic relationships remain clear whether users are on mobile, tablet or desktop.

Fluid typography may be overridden in data-dense scenarios where power users need to see maximum information on screen or when device sizes are fixed and predictable. These overrides are typically applied globally rather than to individual components.

The type system in Bolt ensures that content remains readable and well-structured regardless of viewport size, theme mode or information density. Clear typographic hierarchy helps users navigate efficiently and understand relationships between content elements.

Typographic styling is independent of semantic HTML. Semantic markup (heading levels, paragraph tags, lists) defines the document structure for accessibility and SEO—this is non-negotiable. Visual styling can then influence how users perceive importance and relationships, but it must reinforce, not replace, proper semantic structure.

• Lead with clear headings that describe user benefits or outcomes, not technical implementation details
• Use size, weight and spacing — not color alone — to indicate importance
• Keep line lengths comfortable for reading—avoid lines that are too long or too short
• Avoid truncation where it hides critical meaning
• Ensure sufficient line height for readability and accessibility
• Use lists, tables and other structures to break up complex information and support scanning
• Text alignment supports readability:
  • Left-align text by default—this is the standard for nearly all content
  • Right-align numeric data in tables (headers should match column alignment)
  • Use center alignment sparingly and with clear purpose
• All-caps text should be used sparingly:
  • Use for overline labels or category tags in tiles and cards
  • Acceptable for data that cannot be reliably transformed (e.g., from databases)
  • Avoid for body copy or headings—all-caps reduces readability

• Apply tokens for all type sizes, weights and line heights — never custom values
• Favor a small set of weights for a calmer, more focused page
• Align typographic hierarchy with Layout & Grid and Space tokens to keep visual and semantic outlines in sync
• Maintain WCAG 2.2 AA contrast ratios: 4.5:1 for normal text, 3:1 for large text

See also: Color principles for guidance on color contrast and accessibility.

See also: Typography utility classes, including Static typography configuration.

See also: Space principles for guidance on spacing and rhythm.

Consistent typography reduces cognitive load and builds trust through predictability.

By using a unified type scale and spacing system, Bolt ensures text remains legible, scannable and accessible across all products, platforms and themes.

Simple rule of thumb: If text is hard to scan or hierarchy is unclear, revisit the type scale and spacing—not the font.

1. Include the appropriate Bolt CSS file.
2. Apply the bolt-typography class to your <html> tag.
3. Apply the appropriate HTML configuration as documented below.

• When coded, semantic headings should be considered before applying a specific size.
  • Sizing is not strictly tied to a semantic element.
  • Sizing and semantics should be considered independently, based on context.
• Heading sizes are responsive, scaling linearly based on the viewport width.

<h1 class="bolt-heading-xl">XL Heading - default</h1>
<h1 class="bolt-heading-xl bolt-sans-serif">XL Heading - sans-serif</h1>

<h2 class="bolt-heading-lg">LG Heading - default</h2>
<h2 class="bolt-heading-lg bolt-serif">LG Heading - serif</h2>

<h3 class="bolt-heading-md">MD Heading - default</h3>
<h3 class="bolt-heading-md bolt-serif">MD Heading - serif</h3>

<h4 class="bolt-heading-sm">SM Heading - default</h4>
<h4 class="bolt-heading-sm bolt-serif">SM Heading - serif</h4>

<h5 class="bolt-heading-xs">XS Heading - default</h5>

Bolt supports 4 alternative heading colors:

• Vibrant Blue
• Medium Blue
• Dark Blue
• White

Refer to the following examples to learn how to apply each color.

<h2 class="bolt-heading-lg bolt-heading-vibrantBlue">
  LG Heading - Vibrant Blue
</h2>
<h2 class="bolt-heading-lg bolt-heading-mediumBlue">
  LG Heading - Medium Blue
</h2>
<h2 class="bolt-heading-lg bolt-heading-darkBlue">
  LG Heading - Dark Blue
</h2>

<h2 class="bolt-heading-lg bolt-heading-mediumBlue">
  LG Heading - Medium Blue
</h2>
<h2 class="bolt-heading-lg bolt-heading-white">
  LG Heading - White
</h2>

<div class="bolt-subheading-lg">LG Subheading</div>
<div class="bolt-subheading-md">MD Subheading</div>
<div class="bolt-subheading-sm">SM Subheading</div>

<div class="bolt-body-copy-lg">LG Body copy</div>
<div class="bolt-body-copy-md">MD Body copy</div>
<div class="bolt-body-copy-sm">SM Body copy</div>

Responsive typography can be locked to minimum or maximum value by applying one of the following typography utility classes to the <html> element (on the same element as the bolt-typography class).

Options include:

• Minimum scale: use bolt-typography--min class
• Maximum scale: use bolt-typography--max class

<html class="bolt-typography bolt-typography--min">
  ...
</html>

Semantic elements that provide inline formatting are styled automatically, as a result of adding the bolt-typography class to your document.

<strong>Bold text</strong><br />
<em>Italicized text</em><br />
Text with <sup>superscript</sup><br />
Text with <sub>subscript</sub><br /><br />
Copyright, trademark, and service mark symbols shouldn't use superscript tags, their symbols are already correct: &trade; &copy; &#8480;

Please refer to accessibility docs about color.