Extending Your Design System to the Inbox
Your website has a design system. Your app has a design system. Your emails? A chaotic mix, where your transactional emails are locked behind developer resources, and your marketing emails are designed using pre-made templates in your CRM.
The inbox used to be where brand consistency goes to die, and typography is one of the biggest culprits. Here's how to extend your typography standards to your team's emails to create a cohesive brand experience across every touchpoint.
Font Selection & Rendering
Your brand fonts won't render the same way in email as they do on the web. Email clients are unpredictable, and custom web fonts often fail to load. The solution is a robust fallback stack that maintains your brand's personality even when your primary font doesn't load.
Build your fallback stack strategically:
font-family: 'Lato, Helvetica, Arial, sans-serif' ;
Start with your brand font, then fall back to system fonts that match its characteristics. If your brand uses a geometric sans-serif, choose fallbacks with similar proportions. The results won’t always be perfect, but in the case of font-family fallbacks it’s best to be specific and not leave your brand in the hands of the email client.
Tip: Test your fallback stack by deliberately blocking your custom font. Does the email still feel like your brand?
Readability Fundamentals
Typography isn't decoration, it's how people consume your message. Get these three fundamentals right and your emails will immediately feel more professional.
Line length: 45-75 characters per line
Shorter than your website probably uses, but email clients display in narrower viewports. Constrain your text container to around 600-700px max-width to hit this range.
Line height: 1.5-1.6x your font size
If you're using 16px body text, set line-height to 24-26px. Tighter line height works on the web but feels cramped in email where reading conditions vary wildly.
Font size: 16px minimum for body text
This isn't negotiable for accessibility. Remember: your audience is reading on everything from 27-inch monitors to 5-inch highly reflective phone screens.
Fine-Tuning your Titles & Paragraphs
These typographic details separate professional emails from amateur ones. A widow is a single word sitting alone on the last line of a paragraph. An orphan is a single line of text at the start or end of a column or page. They create awkward visual gaps that make your email look unpolished, like you didn't quite finish the job.
The problem is that widows and orphans aren't just aesthetic issues. A single word dangling on its own line takes up as much room as a full line of text, making your email feel longer and less scannable than it needs to be.
How can you stop single words from appearing on the last line of your emails? There are two main methods:
Manual prevention (the hard way):
You can manually paste non-breaking spaces ( ) into your code strategically to pull words together at the start or end of your text block. Insert a non-breaking space between the last two or three words of a paragraph and they'll stick together, even when the text reflows. While this works, it means manual work for every block of text in email, making it easy to miss when you're making last-minute edits and content updates.
Automatic prevention (the smart way):
If you're using an email production platform like Dyspatch with built-in widow and orphan prevention, this becomes effortless.
You can set your preferences at the theme level and Dyspatch prevents orphan words in all of your emails and communications. This makes it easy to maintain consistent typography across all your emails, with the option to fine-tune in special cases. Without proper device testing, there is a risk that users are seeing widow words while recipients on alternate devices and clients experience broken layouts and awkward line breaks.
Text Alignment
Left-aligned text: it’s the default for a reason, it's the easiest to read. But email designers often reach for centered text because it "looks designed."
Use left-aligned text for: Body copy, paragraphs longer than two lines, anything you actually want people to read.
Use centered text for: Headings, CTAs, hero text, and single-line statements. Keep it short, centered text becomes hard to scan beyond 2-3 lines.
Avoid using justified text in email: It creates uneven word spacing (called "rivers") down the center of the paragraph since email clients don't have sophisticated hyphenation engines like InDesign. The result detracts from the readability and the unpredictable spacing will interfere with your visual hierarchy.
Color & Legibility
Make your links distinguishable beyond color alone with either an underline, outline or background highlight color. Color-only links fail for colorblind users and links can become invisible in some dark mode implementations.
For this reason, it's actually best to avoid all color-only indicators. If you're using red text to indicate an error or green for success, add an icon or text label as well. "❌ Error" is accessible. Red text alone isn't.
Mobile Considerations
Up to 50% of emails were opened on mobile email clients in 2025. If your typography doesn't work on a 6-inch screen, it doesn't work.
Font sizes scale differently on mobile. iOS applies automatic text size adjustment that can make your carefully sized typography look wrong.
Touch-friendly spacing is non-negotiable. Buttons and links need at least 44x44px of tappable area (Apple's guideline) or 48x48px (Google's). That means generous padding around linked text and spacing between multiple links.
Building Your Email Typography System
The best email typography doesn't call attention to itself, it just works. When users interact with your email communications and your website, they shouldn't notice a jarring shift in voice or quality. Every typographic choice should feel like a natural extension of your brand.
Start by documenting your standards: font stacks, sizes, line heights, colors, and spacing rules. Then enforce them with email templates that bake these standards in. Your emails will look more professional, your brand will feel more cohesive, and your users will have a better experience.
New to building email design systems? Our guide to Marketing email redesign will walk you through the complete process, from audit to implementation.
