Typography Components
Relevant source files
The following files were used as context for generating this wiki page:
Typography components provide a standardized way to render text, headings, and custom fonts within HTML emails. These components resolve inconsistencies between email clients by applying specific fallback styles and handling the conversion of modern CSS units into client-compatible formats.
The suite includes core primitives for structural text (Heading, Text), font configuration (Font), and specialized content rendering (Markdown, CodeBlock, CodeInline). These components integrate with the Tailwind component to support utility-first styling while maintaining accessibility defaults like appropriate ARIA roles and semantic HTML tags.
Sources: skills/react-email/references/COMPONENTS.md:3-21, README.md:43-62
Core Text Primitives
Core text primitives manage the visual hierarchy and structure of an email's content.
Heading Component
The Heading component renders semantic HTML heading levels from h1 through h6. You specify the level using the as prop. It applies block-level formatting and serves as the primary mechanism for establishing content hierarchy for screen readers.
Sources: skills/react-email/references/COMPONENTS.md:124-136, skills/react-email/SKILL.md:104-106
Text Component
The Text component renders paragraphs separated by blank spaces. It acts as the primary container for body copy. In many implementations, it defaults to a paragraph (<p>) tag and handles consistent spacing across clients that often strip default margins.
Sources: skills/react-email/references/COMPONENTS.md:138-142, README.md:61
Typography Component Properties
| Component | Prop | Type | Description |
|---|---|---|---|
Heading | as | string | The HTML heading level ("h1" through "h6"). |
Heading | children | ReactNode | The text content to display. |
Text | className | string | Tailwind or CSS classes for styling. |
Text | style | CSSProperties | Inline style overrides. |
| Sources: skills/react-email/references/COMPONENTS.md:136-142 |
Font Configuration and Injection
The Font component manages custom web fonts by injecting the necessary @font-face declarations into the email document's <head>.
Custom Font Logic
Because email clients vary in font support, the Font component requires a fallbackFontFamily. This ensures the email remains readable if the web font fails to load. The component accepts a webFont object containing the source URL and the specific format (e.g., woff2).
The diagram shows how the Font component processes font data to either inject CSS or rely on local system fonts.
Sources: skills/react-email/references/COMPONENTS.md:214-237, packages/react-email/src/components/font/font.tsx
Font Component Props
| Prop | Type | Requirement | Description |
|---|---|---|---|
fontFamily | string | Required | The name of the font family. |
fallbackFontFamily | string | Optional | Fonts to use if the primary font is unavailable. |
webFont | object | Optional | Contains url and format (woff2, woff, truetype, opentype). |
| Sources: skills/react-email/references/COMPONENTS.md:228-237 |
Specialized Content Components
Specialized components handle non-standard text formats like Markdown or technical code snippets.
Markdown Rendering
The Markdown component converts standard Markdown strings into valid React Email components. It automatically applies role="presentation" to layout tables it generates to improve accessibility for screen readers. It supports style overrides via markdownCustomStyles for specific elements like headers or links.
Sources: skills/react-email/references/COMPONENTS.md:195-212, skills/react-email/SKILL.md:267-270
Technical Typography
React Email provides two components for displaying code:
- CodeBlock: Renders multi-line code with syntax highlighting using Prism.js. It requires a
theme(e.g.,dracula,github) and alanguage. - CodeInline: Renders inline code that behaves predictably across different email clients.
Sources: skills/react-email/references/COMPONENTS.md:168-193
The diagram illustrates the transformation of Markdown into standard typography components and the internal processing of code components.
Sources: skills/react-email/references/COMPONENTS.md:168-212, apps/web/src/app/api/markdown/components/markdown.ts
Styling and Hierarchy Best Practices
Spacing and Hierarchy
Headings should use larger margins and bold weights, while paragraph text uses regular weights and smaller margins. You should maintain a strict hierarchy (h1 followed by h2, etc.) and never skip levels to ensure document accessibility.
Sources: skills/react-email/references/STYLING.md:105-116, skills/react-email/SKILL.md:275-277
Tailwind Integration
When using the Tailwind component for typography:
- Wrap typography components inside the
<Tailwind>provider. - Use the
pixelBasedPresetto convertremunits topx, as email clients do not support relative units. - Avoid responsive prefixes (e.g.,
sm:text-lg) as they rely on media queries which have limited support.
Sources: skills/react-email/references/STYLING.md:13-25, skills/react-email/SKILL.md:154-158
Typography components in React Email standardize text rendering while maintaining strict adherence to email client limitations. By utilizing Heading, Text, and Font components, developers create accessible and visually consistent templates across diverse platforms like Gmail, Outlook, and Apple Mail.
Sources: README.md:85-95, skills/react-email/references/STYLING.md:32-40