Typography

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Typography components provide a set of semantic, styled wrappers for standard HTML text elements. Each component applies consistent Tailwind CSS classes that follow the design system's type scale, ensuring visual harmony across headings, body text, captions, and decorative elements without writing custom styles.

Headings

Four heading levels are available, each with distinct size and weight. Use them to establish clear visual hierarchy in your content.

The Art of Typography

Hierarchy and Visual Flow

Spacing and Rhythm

Micro Typography

Body Text

Several body text variants cover different levels of emphasis. TypographyLead is ideal for article introductions, while TypographyMuted works well for captions and secondary notes.

Good typography shapes how readers experience information — it guides the eye, sets the tone, and builds trust before a single word is consciously read.

Consistent type scales reduce decision fatigue for designers and create a predictable reading rhythm for users. Every size and weight choice should serve a clear purpose in the content hierarchy.

Feature highlight or callout line

Published on May 14, 2026 · 5 min read

This article is for informational purposes only and does not constitute professional design advice.

Blockquote

Use TypographyBlockquote to highlight quotes, pull quotes, or notable excerpts from external sources.

"Typography is the craft of endowing human language with a durable visual form, and thus with an independent existence."

— Robert Bringhurst, The Elements of Typographic Style

Inline Code

TypographyCode renders inline code snippets with a monospaced font and muted background, suitable for embedding short code references within prose.

Pass the variant prop to control the visual style of the component. Accepted values are "default", "secondary", and "destructive".

The className prop is always forwarded, so you can extend styles using Tailwind utility classes.

Lists

TypographyList renders a disc-style unordered list with consistent vertical spacing between items.

What's included

• Full access to all components and design tokens
• Storybook documentation with live interactive examples
• TypeScript definitions for every prop and variant
• Dark mode support via CSS custom properties
• Regular updates aligned with the design system roadmap

Full Article

The real power of the Typography system shows when all components are combined to compose a complete, readable article layout.

Designing for Clarity

A practical guide to building interfaces that communicate effectively without relying on decoration.

Clarity in design is not about minimalism — it is about precision. Every element on screen either adds meaning or creates noise. The discipline of type selection, spacing, and hierarchy determines whether users find what they need or give up in frustration.

Building a Visual Hierarchy

Hierarchy guides the reader's eye from the most important information to the least. A well-structured page answers the reader's first question — "what is this?" — within a glance.

"The goal of design is not to make something pretty — it is to make something that works so well it becomes invisible."

Practical Starting Points

When implementing a type system, start with the TypographyH1 and work downward. Establish contrast between levels before tuning individual weights.

• Define heading levels before body styles
• Limit your type scale to four or five sizes
• Use weight and size together — not one alone — for emphasis
• Reserve muted styles for truly secondary content

Last updated May 14, 2026 · Part of the BuildGrid UI design guide series.

Properties

Component	HTML element	Description
TypographyH1	<h1>	Extra-large bold heading; the top of the page hierarchy.
TypographyH2	<h2>	Large semibold heading with a bottom border; major section divider.
TypographyH3	<h3>	Medium semibold heading; subsection titles.
TypographyH4	<h4>	Small semibold heading; minor groupings or card titles.
TypographyP	<p>	Standard body paragraph with comfortable line height.
TypographyLead	<p>	Larger, muted introductory paragraph.
TypographyLarge	<div>	Semibold large text for callouts or feature lines.
TypographySmall	<small>	Small, medium-weight text for metadata and timestamps.
TypographyMuted	<p>	Small, muted text for captions, footnotes, and disclaimers.
TypographyBlockquote	<blockquote>	Left-bordered italic blockquote for pull quotes.
TypographyCode	<code>	Inline monospaced code with a muted background pill.
TypographyList	<ul>	Disc-style unordered list with consistent item spacing.

All components accept className and all native HTML attributes for the underlying element.