Strong copy and precise segmentation solve half the problem. The other half is how the email looks and reads on screen. In this article, we cover the first screen, typography, design, responsiveness, and the email's logic: what to check before sending so you don't lose a click over a misaligned button or unreadable font.
The first screen decides everything
Most subscribers decide whether to keep reading before they even scroll once. The first screen is your storefront.
Check:
- The key message is visible without scrolling on a smartphone — the visible area is roughly 600 pixels tall
- The heading is large, high-contrast, and doesn't get cut off on mobile
- The banner loads quickly and doesn't overload the screen
- A call-to-action button is present on the first screen — the reader shouldn't need to scroll to find it
- The main image's alt text is written as a full-fledged headline: if the image fails to load, the meaning isn't lost
A common mistake:
A large decorative banner takes up the entire first screen, and the actual point of the email only starts after it. The reader leaves before they even scroll down to the offer.
Typography and readability
Poor typography determines whether the email gets read to the end.
Check:
- Body text size — at least 14 pixels, ideally 15-16 for mobile
- Line height — 1.4-1.6: the text has room to breathe, and the eye doesn't get tired
- The text block's width doesn't exceed 600 pixels — lines that are too wide are hard to read
- No more than two fonts are used: one for headings, one for body text
- Bold is used sparingly — only for key ideas, not for decoration
- Italics aren't used in large blocks: they're harder to read on screen than on paper
- Text-to-background contrast is at least 4.5:1 (check with any online contrast-checking tool)
Tip:
Turn off images in your email client and read the email without pictures. If it's still comfortable to read, the typography is working.
Design and visual hierarchy
A chaotic visual structure is why the reader doesn't know where to look or what to do next. The job of the design is to guide the eye through the email, not hold it in one place.
Check:
- One focal point per section: a heading, an image, or a button — not everything at once
- Visual hierarchy flows top to bottom: the most important thing is bigger and higher up
- The palette is limited to 2-3 brand colors, not counting neutrals (white, gray)
- Call-to-action buttons stand out by color and size against the rest of the content
- There's enough spacing between blocks — the email doesn't turn into one solid wall of content
- Illustrations and icons are stylistically consistent: flat and 3D styles aren't mixed
- The logo is clickable and links to the website's homepage
The reader shouldn't have to study the email to understand what's being offered. Good design means the gist and the call to action are clear at a glance.
Responsiveness and email client compatibility
More than half of all emails are opened on mobile devices, and responsiveness is still a weak point in most campaigns.
Check:
- The layout uses responsive blocks: columns stack into one on mobile
- Call-to-action buttons on mobile are at least 44 pixels tall — sized for a finger tap
- Images scale proportionally, without being cropped or stretched
- The font doesn't automatically shrink below 13 pixels on mobile devices
- The email has been checked in dark mode: colors, icons, and text don't invert unpredictably
- The key clients have been tested: Gmail (iOS and Android), Outlook, Yandex
- Links are tappable on mobile — neighboring links aren't placed too close together, to avoid mis-taps
The built-in preview in Letteros lets you see the email across several clients at once without manually sending test emails.
The email's logic from the reader's perspective
Usability in an email isn't just about layout. What matters is how intuitively the reader moves from opening the email to taking the target action.
Check:
- One email solves one task: several calls to action with different goals get in each other's way
- In a long email, the call-to-action button is repeated: once near the top, once at the end
- Links are visually distinct from regular text: a different color or an underline
- The order of the blocks follows the logic of "problem — solution — action"
- The email makes sense without images: if images are turned off, the meaning and the call to action still come through
- The footer isn't overloaded: contact info, an unsubscribe link, and legal information are enough
- The unsubscribe link is visible and works: hiding it means losing trust and breaking the law
Final check before sending
A final run-through is mandatory, even if everything above has been checked. This is where you catch what the author's "tired eyes" missed.
Check:
- Send a test email to yourself and a colleague — on iOS and Android, in different email clients
- Open the email on a slow internet connection: does everything load within a reasonable time
- Check the email in dark mode manually — not just in the editor's preview
- Go through every link: buttons, images, text links, the logo
- Ask someone who wasn't involved in writing the email to read it and answer: what's being offered here, and what am I supposed to do
- Make sure no link points to a test or outdated page
How Letteros takes some of this work off your plate
Going through the checklist manually before every send is the right thing to do, but it's slow — especially when you're sending a lot of emails and teams are working in parallel.
In Letteros, master templates are built from the ground up with responsiveness, correct typography, and visual hierarchy in mind. The block editor won't let you break the layout: columns stack correctly, buttons keep the right size, and spacing follows the system. Preview across multiple clients is available with no third-party tools needed.
This doesn't replace the final check, but it does reduce the number of mistakes you have to catch by hand.
The final checklist
First screen
☐ The key message is visible without scrolling
☐ The heading isn't cut off on mobile
☐ The banner loads quickly
☐ There's a call-to-action button on the first screen
☐ The main image has alt text
Typography
☐ Body text size is 14 pixels or more
☐ Line height is 1.4-1.6
☐ The text block's width is no more than 600 pixels
☐ No more than two fonts
☐ Bold is used only for key ideas
☐ Text-to-background contrast is at least 4.5:1
Design
☐ One focal point per section
☐ The palette has 2-3 brand colors
☐ Buttons stand out against the content
☐ There's enough spacing between blocks
☐ Illustrations are stylistically consistent
☐ The logo is clickable
Responsiveness
☐ Columns stack into one on mobile
☐ Buttons are at least 44 pixels tall
☐ Images scale proportionally
☐ The font doesn't shrink below 13 pixels
☐ The email has been checked in dark mode
☐ Gmail, Outlook, and Yandex have been tested
Logic and usability
☐ One email, one goal
☐ Links are visually distinct from the text
☐ The email makes sense without images
☐ The footer isn't overloaded
☐ The unsubscribe link works
Final run-through
☐ The test email has been checked on real devices
☐ The email has been opened on a slow connection
☐ All links have been checked manually
☐ A fresh pair of eyes has reviewed it
☐ There are no links to test pages
Try Letteros
Letteros is a platform for creating and sending emails where responsiveness, typography, and structure are built into the templates by default. Fewer manual checks, fewer mistakes before you hit send.