Search components
Search powered by

HubSpot Email Template: Specs, FAQ's and Best Practices

Please note: this page is best displayed on a desktop, as spec values are fixed widths below.

HubSpot Email Template: Mobile

Full Width 360px
Outer gutter + mobile padding 30px
Contained Width 300px
½ Col 130px
½ Col 130px
A 2 col inside gutter is 40px on mobile

H1 title: 28px

H2 title: 22px

H3 title: 17px

Paragraph: 15px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec nisi convallis, volutpat arcu a, blandit felis. Sed venenatis ex ac velit pulvinar ultrices at at justo.

HubSpot Email Template: Desktop

Full Width 600px
Outside gutter 20px
Contained Width 560px
Half Col Width 260px
Half Col Width 260px
A 2 col inside gutter is 40px on desktop

H1 title: 28px

H2 title: 22px

H3 title: 17px

Paragraph: 15px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec nisi convallis, volutpat arcu a, blandit felis. Sed venenatis ex ac velit pulvinar ultrices at at justo.

HTML Email Template: FAQ's'

Keep it simple .... as this is old technology, use table-based approach and avoid complicated components or elements.
Some email Clients may require images to be downloaded before they can be displayed. Try to stick to the 80/20 rule (80% text and 20% images) .... too many images can make your email look like spam and can result in your email being sent to the recipient’s junk mail folder.
Yes, columns can be used, but as the email clients viewports are narrow, we recommend a max of 2 columns.
Rounded corners have limited support. If used, and the email client doesn't support them, they will fall back to square corners. If you need rounded corners, please ensure all corners have same radius.
Buttons with rounded corners have limited support. If used, and the email client doesn't support them, they will fall back to square corners. If you need rounded corners, please ensure all corners have the same radius.
Background images have limited support, and have limited fallback on email clients, so best to avoid using them.
Shadows have limited support, and have limited fallback options on email clients, so best to avoid using them.
No, SVG images cannot be used. Use PNG or JPEG instead.
Yes, optimisation is recommended to ensure images load quickly on mobile and desktop devices. We recommend creating full width bitmap images at 600px wide, and to optimise images, use an online service such as https://compressor.io/
Custom fonts have limited support, so best to use web safe fonts eg. Arial (sans-serif), Verdana (sans-serif), Tahoma (sans-serif), Trebuchet MS (sans-serif), Times New Roman (serif), Georgia (serif), Garamond (serif), Courier New (monospace), Brush Script MT (cursive)
No, its best to stay away from effects like CSS or javascript. An alternative is to use GIF for animations.
Yes, we recommend outputting assets at 2x for retina displays.
When starting an introduction eg. "Hi [First Name]," please advise on a fallback personlised token eg. "Hi there," or "Hi Customer.", but we'll use "Hi there" as the default.