Content5 min read•Audience: All, Marketers, Designers
Text Block (mj-text)
Format body copy, configure font stacks, line-height, text alignment, and insert inline links and variables.
Key Takeaways
- Format text using the inline floating WYSIWYG toolbar or right-hand properties inspector.
- Configure font family, font size (px), font weight, line height, letter spacing, and text color.
- Insert inline links with custom link colors and underline styling.
- Inject Handlebars variables (like {{firstName}}) directly into your copy.
Inline Text Editing#
To edit text:
- Double-click any Text block directly on the canvas.
- A floating formatting toolbar appears above your cursor with tools for:
- Bold (
Cmd+B), Italic (Cmd+I), Underline (Cmd+U), Strikethrough. - Text Alignment: Left, Center, Right, Justify.
- Lists: Bulleted (
<ul>) and Numbered (<ol>) lists. - Hyperlinks: Insert link URL, target (
_blank), and custom color. - Variable Inserter: Click the
{x}icon to quickly insert merge tags.
Email Typography Best Practices#
To maximize legibility and prevent email client rendering bugs:
- Body Font Size: Never use body text smaller than 14px (we recommend 16px). Apple Mail and Android clients will automatically zoom or enlarge text below 13px, which can distort your layout.
- Line Height: Always maintain a line-height ratio between 1.4 and 1.6 (e.g. 24px line-height for 16px text). Outlook desktop will clip tall descenders (
g,y,p) if the line-height is set too tight. - Color Contrast: Ensure at least a 4.5:1 contrast ratio against the section background for WCAG AA compliance.
Frequently Asked Questions
Why does my text wrap differently on different email clients?
Clients use different rendering engines: WebKit on Apple Mail, Blink in web browsers, and the Word engine in Outlook desktop. Safe system fonts and generous container widths provide the most predictable wrapping.
Can I paste formatted text from Microsoft Word or Google Docs?
Yes, but use "Paste without formatting" (Cmd+Shift+V) to avoid importing hidden inline CSS and non-standard font declarations that can corrupt email rendering.