Content4 min read•Audience: Designers, Marketers
Headings (H1 – H4)
Structure email content hierarchy with semantic heading levels, responsive font scaling, and reset margins.
Key Takeaways
- Use semantic heading tags (H1, H2, H3, H4) to establish a clear visual and accessibility hierarchy.
- Recommended sizes: H1 (28px–36px), H2 (22px–26px), H3 (18px–20px), H4 (16px).
- PostBrix automatically resets default browser heading margins to prevent irregular whitespace in Outlook.
- Configure mobile overrides to scale large headlines down gracefully on smaller phone screens.
Heading Hierarchy Standards#
Clean email design depends on consistent typographic hierarchy:
- H1 (Primary Hero Title):
28px – 36px, font-weight 700 or 800. Use once per email to communicate the core announcement or subject. - H2 (Section Header):
22px – 26px, font-weight 600. Separates major content blocks. - H3 (Sub-header / Card Title):
18px – 20px, font-weight 600. Used for individual product names, feature titles, or team member cards. - H4 (Eyebrow / Overline):
12px – 14px, font-weight 700, uppercase with letter-spacing. Placed above H1/H2 for category tags.
Mobile Heading Scaling#
A 36px headline looks striking on a desktop monitor, but can wrap into four or five awkward single-word lines on an iPhone screen.
With PostBrix, you can scale headings for mobile:
- Select the Heading block.
- In the right panel, switch to the Mobile tab.
- Reduce font size from
32pxto24pxand line-height from40pxto30px. - The desktop design remains
32px, while mobile devices automatically render the smaller, balanced24pxsize via generated media queries.
Frequently Asked Questions
Do email clients support semantic H1-H4 HTML tags?
Yes. PostBrix outputs semantic heading elements wrapped inside table cells with inline style resets, ensuring full screen reader accessibility and consistent vertical spacing in Outlook.
How do I add an eyebrow or category tag above my main headline?
Insert an H4 block immediately above the H1, set its font size to 12px or 13px, enable uppercase transform, and apply a 1px letter spacing in the typography inspector.