AMP in email newsletters is a way to add interactivity to an email: forms, carousels, content switching without going to a website. However, just like with regular HTML emails, there are specific rendering and behavior quirks that must be taken into account during coding and testing.

In this article, we explore 8 common problems that developers face when working with AMP emails — and show how to solve them in practice, with examples, code, and explanations.

## 1. AMP Carousel Issue in Gmail on iOS

When using the standard `<amp-carousel>` component in Gmail on iOS, an unpleasant bug occurs — when switching slides, the email scrolls sharply to the top. This issue has been known for a long time, but the behavior has not yet been fixed.

**Solution:** Avoid using `<amp-carousel>`, and instead simulate it using states (amp-bind). Below is a working example:

```html
<amp-state id="carouselState">
  <script type="application/json">
    {
        "index": 0
    }
  </script>
</amp-state>

<style amp-custom>
  .carousel-wrapper {
    position: relative;
    width: 450px;
    height: 300px;
    overflow: hidden;
  }
  .carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .slide-0 { transform: translateX(0%); }
  .slide-1 { transform: translateX(-100%); }
  .slide-2 { transform: translateX(-200%); }
  .carousel-slide {
    min-width: 100%;
    flex: 0 0 auto;
  }
</style>

<div class="carousel-wrapper">
  <div class="carousel-container" [class]="'carousel-container slide-' + carouselState.index">
    <amp-img src="https://amp.dev/static/inline-examples/images/image1.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image2.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image3.jpg" width="450" height="300" class="carousel-slide"></amp-img>
  </div>
</div>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 3) % 3}})">
  Previous
</button>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 3}})">
  Next
</button>
```

## 2. ESP Variables and AMP Templates (Syntax Conflict)

Many ESPs (email service providers) allow inserting personalization variables or conditional logic into email templates. Often, the syntax of these variables overlaps with the syntax used in AMP templates (amp-mustache), which also use double curly braces `{{ }}`. This leads to the ESP misinterpreting or corrupting the AMP template by treating it as its own variables. As a result, the email may break or fail to send altogether (if the ESP considers the template invalid).

**Solutions:**

[**Altcraft**](https://altcraft.com/): Altcraft templates also use curly braces, so to mark an AMP template, you need to add a `$` prefix. For example, instead of `{{success}}` you write `${{success}}`. The `$` prevents interpretation by the platform, and the resulting sent email will retain the clean `{{success}}` for AMP. This means Altcraft will pass through that segment, allowing AMP to process it client-side.

Example:



```<template type="amp-mustache">$\{\{success\}\}</template>``` — Altcraft will not modify the content inside ```$ {{ }}```, and when rendered, AMP will see the standard ```{{success}}```.
.

**Mailganer:** In Mailganer, special tags ```{% verbatim %} ... {% endverbatim %}``` are provided for such cases. Any code enclosed within ```{% verbatim %}``` will not be altered by the platform. Therefore, the AMP template can be wrapped in these tags.

**Example:**


```HTML
 <template type="amp-mustache">
  {% verbatim %}{{success}}{% endverbatim %}
</template>
```

## 3. Dark Mode Behavior in Different Clients

AMP emails in dark mode are displayed differently depending on the email client. In some cases, the email is recolored automatically, in others — it remains unchanged, and in some situations the developer can define custom styles.

**Let's break it down:**

**Gmail on Android.** Automatically recolors light-themed emails to dark.

**Gmail on iOS.** Does not recolor the email and does not allow customization.

**Yahoo.** Similar behavior to Gmail: auto-inversion on Android, email remains unchanged on iOS.


## 4. AMP Email Lifespan

The AMP content of an email is displayed only for 30 days. After that, the regular HTML version is shown. This is done to ensure the reliability of the AMP email, which often relies on server-side components that may stop working over time.

**Solutions:**

Even in AMP emails, it is important to pay attention to the quality and content of the HTML version. It is displayed to users whose email clients do not support AMP, as well as after 30 days when the AMP content expires. Therefore, the HTML version should include all key information and serve as a full alternative to the interactive AMP part.


## 5. Email Size Limit in Gmail

Gmail enforces two different limits on email size:

- HTML part: maximum 102 KB. If exceeded, the email is clipped and Gmail shows a "View entire message" link. This disrupts the layout and hides part of the content.

- **AMP part:** maximum 200 KB. If exceeded, the AMP version simply won’t be displayed — the user will see the HTML version instead.

<Img
img="/api/uploads/Message_clipped_d44aa01f90.png"
alt="Partial message shown"
/>


**Solutions:**

- **Minify your code.** Remove comments, whitespace, and duplicate styles. Use specialized tools (e.g., [**htmlminifier.com**](https://htmlminifier.com)).

- **Eliminate unnecessary elements.** Reduce tracking links, clean the template from unused elements and hidden blocks.

- **Optimize styles:** put shared styles in ```<style amp-custom>```, and use inline styles only when necessary.

## 6. Issues with AMP Email Analytics

AMP allows interaction with content directly within the email — for example, clicking buttons, filling out forms, or browsing carousels — without navigating to a website. Such actions are not captured by standard trackers, since JavaScript is not allowed inside AMP, and the ```<amp-analytics>``` component is not supported in AMP for email. As a result, clicks and events remain "invisible" to analytics systems like Google Analytics, Yandex.Metrica, and most ESPs.

**Solution:**

To implement such analytics, you can use services that support event tracking via tracking pixels. One reliable option is [**Pixcraft**](https://pixcraft.io), which provides an API for tracking AMP events through regular GET requests.


## Conclusion

When coding AMP emails, it’s important to consider how they behave across different email clients. Even major platforms like Gmail show variations in behavior: carousels may break in some places, states may be ignored in others.

Always test your emails in Gmail (web, Android, iOS), Yahoo. The key is not to rely on “if it works in one place, it works everywhere.” Take the time to test thoroughly, and the interactivity in your emails will work reliably, regardless of the platform.

This article covers eight challenges in coding AMP emails and practical solutions with examples and code.


small_amp-emails.png

thumbnail_amp-emails.png

amp-emails.png

Top 8 Nuances of Creating AMP Emails

Figma has received a major update with new tools for interface design, prototyping, and content work. The editor now includes drawing, responsive grids, AI-generated interfaces, and a site builder. New features support marketing and branded content management. All innovations are unified within a single environment—no need to switch between services.

In this overview, we’ll cover what exactly has changed and how to use it in your daily workflow.

## Figma Make

<Img
img="/api/uploads/figma_update_make_17ac1606c2.png"
alt="Figma Make"
/>

Figma Make turns a text description or an existing Figma frame into an interactive prototype with code. You can start from scratch by typing what you need—for example, "profile screen with avatar, button, and list"—and get a ready-made layout you can tweak. Or copy an existing frame into Make and ask AI to add logic: animations, transitions, interactivity. The result isn’t just a mockup, but actual working code—you can preview it, edit it, and even publish it as a mini app.

The tool is still in beta and somewhat unstable—results can be odd or overly simplistic. Right now, Figma Make is more of a way to quickly test ideas or throw together a quick prototype, not a replacement for full development. The community is intrigued but not overly excited: the potential is there, but it’s still rough around the edges. Still, the idea of generating prototypes from a description opens up time-saving opportunities, especially in early stages.

In addition to Make, Figma added other AI features directly into the editor. You can now autofill text—Figma will suggest context-aware options so you don’t have to copy placeholder content manually. There’s basic image editing using AI—for example, removing a background or improving quality without external services. And it all works with no extra setup: just select an object and start the content replacement.

These tools reduce routine work and speed up filling in mockups, especially when you need to quickly show a concept with semi-realistic content. Right now, they’re supplementary features, but over time, they’ll likely become standard in everyday use.

## Grid Auto Layout

<Img
img="/api/uploads/figma_update_grid_42f5ab67e5.png"
alt="Figma Grid Auto Layout"
/>

A new mode called Grid has been added to Auto Layout. Now you can build true two-dimensional grids—not just vertical or horizontal blocks. You can use columns, rows, cells, stretching, and responsiveness. Previously, complex layouts required nesting Auto Layouts or using hacks—now it all works directly, no workarounds needed.

In the settings, you can define the exact number of columns and rows, set their width or height, make them fixed or adaptive. Elements in the grid can span multiple cells, be moved with the mouse, and have margins adjusted. When the parent frame is resized, the grid adapts automatically. It’s great for cards, tables, galleries, and any complex UI that used to be built manually.

Grid is something Figma has long lacked to make mockups closer to real HTML/CSS layout. Everything a designer configures in the grid is now shown in Dev Mode as CSS Grid, with the correct parameters. Developers immediately see the structure and can use the code without “translating” from design-speak. This reduces questions and fixes during handoff—everyone understands the logic and behavior of the interface.

## Figma Draw

<Img
img="/api/uploads/figma_update_draw_fc0128b6a6.png"
alt="Figma Draw"
/>

Figma Draw is a new mode for drawing directly within Figma. Previously, if you needed to illustrate something—an icon or a complex shape—you had to switch to Illustrator or another vector tool. Now you don’t: Figma includes full tools for freehand drawing and working with vector graphics.

There’s a brush for freehand drawing—your strokes remain vector, editable and adjustable. You can choose from different brush styles or create your own. You can also erase parts of lines with the brush, which previously required editing nodes. The settings panel is more convenient—parameters like thickness, opacity, and smoothing are now easily adjustable. You can also select and edit multiple curves at once.

In addition to the brush, other useful tools have been added:

 - Text on a path—for logos or decorative text;
 - Pattern fills—for textures or backgrounds;
 - Dynamic strokes—with slight “wobble” for a hand-drawn feel;
 - Noise and texture effects—to simulate material or a vintage look.

All of this used to require external tools and importing into Figma. Now, it’s built in, which simplifies things if you need interface graphics or quick sketches.

## Figma Sites

<Img
img="/api/uploads/figma_update_sites_ecb64781ae.png"
alt="Figma Sites"
/>

Figma Sites is a built-in tool for creating websites directly in Figma. You can take a design frame, move it to a separate project, and turn it into a basic web page. No coding, no waiting for developers—just configure responsiveness, add transitions or effects, and publish. The beta includes about 50 templates and a set of prebuilt blocks, plus you can use styles and components from your design system.

Sites support breakpoints—you can adjust layouts for mobile, tablet, and desktop. Basic visual effects are available: parallax, smooth animations, marquee, hover states. Everything is edited right in the UI, like any visual editor. Custom code support is promised in the future—for unique logic or behavior not included by default.

Sites are published with one click, and you can connect your own domain. During beta, hosting is free.

Figma Sites isn’t a replacement for full web development—it’s a solution for simpler needs. For example, a product landing page, a campaign microsite, or a quick presentation site—without the overhead of developer handoff. Marketing and content teams can work faster without pulling in engineers.

Initial reactions were mixed. Some hoped for a true Webflow competitor and were disappointed—fewer features, simpler templates, less-than-perfect code. But even critics admit: for standard in-house tasks, it’s more than enough—especially where speed is critical and frontend resources are limited.

There are plans for development—for example, [**a built-in CMS is promised**](https://www.figma.com/blog/config-2025-recap/). If Figma continues to improve Sites, it could take a solid place among no-code tools.

## Figma Buzz

<Img
img="/api/uploads/figma_update_buzz_aaf9bd3e83.png"
alt="Figma Buzz"
/>

Figma Buzz is a new tool for those who create content but aren’t directly involved in design. It’s useful for marketers, managers, or editors who need to quickly produce banners, posts, and other materials without breaking brand guidelines. Instead of constantly asking a designer to recreate assets, you can take a template and make your own versions.

Here’s how it works: a designer creates templates—like a social media post or website banner—and defines what can be changed and what can’t (e.g., text and image are editable, but fonts and colors are locked). Then, anyone on the team can use the template to create a needed layout.

The killer feature: mass content generation from a spreadsheet. You can upload a list of texts and images (e.g., from Google Sheets), and Buzz will generate all possible combinations. It’s handy for campaigns that need multiple versions of the same banner with different products, promos, or languages. The content is immediately ready to download.

There are built-in AI features too. For example, remove an image background, generate missing illustrations, or rewrite text if it doesn’t fit. These little tools save time and eliminate extra app-switching.

Designers benefit too—they won’t have to waste time on repetitive edits, and the team still works within the brand guide. You can lock key template elements to prevent people from making off-brand changes. And if someone does want to experiment—you can always revert to the original.

## Conclusion

Figma is gradually evolving from just an editor into a productive workspace for the whole team—from design to product launch. New features like Make, Sites, Draw, and Buzz simplify workflows, reduce manual effort, and help move from idea to result faster. Not everything is perfect, but the overall direction is right.

If you use Figma, [**check out our page**](https://www.figma.com/@pixcraft). We share lots of useful resources and tools for designers.


Overview of Figma 2025 updates: New tools for design, prototypes, websites, and content — all in one place. What’s been added and how to use it.

small_figma-updates-main.png

thumbnail_figma-updates-main.png

figma-updates-main.png

Figma Updates at Config 2025: A Detailed Overview

Email marketing continues to evolve, offering new ways to interact directly with audiences. Static emails no longer meet users’ expectations — they want interactive, personalized content that allows them to take action without leaving their inbox.  

AMP technology for email unlocks new possibilities by integrating dynamic elements and feedback forms directly into emails. [**In a previous article**](https://pixcraft.io/blog/using-the-amp-list-component-in-email-campaigns), we covered the basics of working with AMP-list in email campaigns. In this article, we’ll focus on the **AMP-form** component — a key tool for creating forms inside emails. It enables real-time user interactions such as collecting data, confirming actions, and building fully functional in-email experiences. We'll explore how to use AMP-form effectively in email marketing and how to integrate it with Pixcraft.

## What is AMP-form

AMP-form is an AMP component that allows you to create forms directly inside an email, without needing to redirect the user to another page. With it, you can add to your email:

- Event registration.
- Feedback collection.
- Newsletter subscription.
- In-email surveys.

<Img
img="/api/uploads/amp_form_message_9b3d2277a4.png"
alt="Example of AMP in email"
src="An example of a form in an email created with AMP-form"
/>

### AMP-form Syntax

The markup for a basic AMP form looks like this:

```HTML
<form method="post" action-xhr="https://example.com/submit">
<input type="text" name="name" placeholder="Your name" required>
<input type="email" name="email" placeholder="Your email" required>
 	<button type="submit">Submit</button>
 <div submit-success>
<template type="amp-mustache">
Thank you for your submission, {{name}}!
</template>
  </div>
  <div submit-error>
Error: please try again.
  </div>
</form>
```

The main attributes here are:

- **action-xhr**: specifies the URL for submitting the form data;  
- **div submit-success**: element displayed upon successful form submission;  
- **div submit-error**: element displayed if there is an error during form submission;  

For dynamic response rendering, [**amp-mustache**](https://amp.dev/documentation/components/email/amp-mustache) is used.

## Form Usage Examples

### Event and Webinar Registration

With AMP-form, you can create a registration form that appears directly in the email. The user enters their name and organization, clicks the Register button, and their data is instantly sent to the organizer’s server.

<Img
img="/api/uploads/amp_form_8e63f91f35.png"
alt="AMP in email"
/>

### Surveys and Feedback Collection

You can embed a form with one or more questions directly in the email to instantly collect feedback, NPS, or suggestions. This form can be styled as a text input field or as a star rating scale.

<Img
img="/api/uploads/amp_form_feedback_25841845f5.gif"
alt="AMP email"
/>

### Booking Meetings and Consultations

With AMP-form, a client can select a date and exact time for a meeting, as well as leave their contact information — all directly within the email.

<Img
img="/api/uploads/amp_form_booking_0305ae3ba8.png"
alt="Booking in an AMP email"
/>

### Placing Orders and Requests

The email recipient can place a product order or request a service without leaving the email or visiting a website.

<Img
img="/api/uploads/web_form_order_e052b2b061.gif"
alt="Order form in email"
/>

### Expanding Communication Channels
If your client already receives notifications via email, you can also subscribe them to other channels, such as SMS.

<Img
img="/api/uploads/amp_form_phone_number_6_35773b5c67.png"
alt="Phone number in email"
/>

### Collecting Additional Information

Forms can be used to collect any marketing-relevant information about the user — for example, their clothing size, pet details, area of work, and more. This data can later be used for personalized newsletters and offers.

<Img
img="/api/uploads/amp_form_example_1fb11c0a1e.png"
alt="Collecting additional information"
/>

## Implementation in Pixcraft

You can quickly create and configure an AMP form using the [**Pixcraft visual builder**](https://pixcraft.io). To do this, go to the **AMP Components** section on the main page of the platform and click **Create AMP-form**.

<Img
img="/api/uploads/amp_form_pixcraft_1_229db4e6d2.png"
alt="Creating an AMP form"
/>

Give your form a name and add a description. If needed, choose a form template, such as a rating scale or a simple form with text fields. You can later add more components to the template.

Next, add and arrange the **form elements** in the desired order. The following elements are available:  

**Input** — single-line text input field;  
**Checkbox** — checkboxes for selecting multiple options;  
**Radio** — radio buttons for selecting a single option;  
**Textarea** — multi-line text input field;  
**Select** – dropdown list for choosing a single option from the available ones;  

You can also add a success message that will appear after the form is submitted.

For text fields, you can configure validation options:  

**Not Validate** — do not validate the value;  
**Required** — field is required;  
**Equal to value** — field content must exactly match a specific value (to be entered in the prompt field);  
**Phone** — validates the number of numeric characters; the required count should be set in the additional validation field;  
**Email** — the entered value must match the email address format.

<Img
img="/api/uploads/amp_form_pixcraft_2_cd61786065.png"
alt="Element label"
/>

By default, form data is stored in Pixcraft, but if you need to send it to an external service or database, you can add a **Webhook** URL. To do this, enter the redirect URL in the corresponding field, and Pixcraft will start sending **POST requests** to the specified address. The request includes the following parameters:

| Parameter   | Type                                           | Example                             | Description                                                                                      |
|-------------|------------------------------------------------|-------------------------------------|--------------------------------------------------------------------------------------------------|
| componentId | Number                                         | 123                                 | ID of the component in Pixcraft.                                                                  |
| campaignId  | Number                                         | 124                                 | ID of the campaign the component belongs to. Can be left empty if the component is not linked to any campaign.                                 |
| email       | String                                         | test@test.com                       | Email address of the subscriber who submitted the form.                                           |
| date        | UNIX date                                      | 1648553051                          | Time when the event occurred.                                                                     |
| owner       | Number                                         | 125                                 | ID of the form owner in Pixcraft.                                                                 |
| data        | Content-Type: application/x-www-form-urlencoded | {"field0": "testInput", "field1": "radio1", "field2": "checkbox2", "success": "success"} | Form data.                                                                |

For more information on creating a form and configuring a webhook, see the [**Pixcraft documentation**](https://docs.pixcraft.io/en/amp/components/form.html).

The form is ready. Copy the generated code and paste it into your email template.

<Img
img="/api/uploads/amp_form_pixcraft_3_bf61c08e30.png"
alt="AMP Form"
/>

After saving, the form will be available in the **Components** section.


<Img
img="/api/uploads/amp_form_pixcraft_4_d72cc9bd46.png"
alt="AMP Form"
/>

The data collected through the forms will be stored in Pixcraft. In the **Statistics** section, you will find information about all interactions with the form.

<Img
img="/api/uploads/amp_form_events_5_48aed250ab.png"
alt="Events: AMP analytics"
/>

This information can be exported as a **CSV file** or uploaded to **Google Sheets**.
### Zapier integration
Form data can be automatically sent to external services using webhooks and tools like Zapier. This enables seamless integration of emails with any service without writing additional code or complex programming.
To begin, click **Create Zap** in the left-hand menu.

In the **Trigger** field, select **Webhook**. On the right, in the menu that appears, choose **Event — Catch Hook**.

<Img
img="/api/uploads/amp_form_zapier_1_d79602fdc2.png"
alt="Zapier webhooks"
/>

Click **Continue** here and in the Trigger section that follows.
The service will generate a webhook URL, which must be specified in the form settings in Pixcraft.

<Img
img="/api/uploads/amp_form_zapier_2_087c033c2b.png"
alt="Enter webhook: Zapier"
/>

Paste the URL and click **Save.**
Return to Zapier and click **Test Trigger**. Now you need to submit the form to trigger the request.

To do this, insert the form code into your email or use Google’s AMP playground.
After submitting the form, go back to Zapier, click **Test Trigger**, and you’ll see a list of received fields.

<Img
img="/api/uploads/amp_form_zapier_3_02aabcd5fe.png"
alt="Test trigger"
/>

Click **Continue with selected record**.

Next, decide what to do with the received data: send it to an ESP, CDP, CRM, etc. — select any integration from the list. For example, to send the data to **Pipedrive**, select **Pipedrive** in the **Action** field.

For **Event**, choose **Create Person**. Click **Continue**, then add or select your Pipedrive account.
In the **Action section**, map the submitted fields accordingly.

<Img
img="/api/uploads/amp_form_zapier_4_a9e19a9d1a.png"
alt="Pipedrive"
/>

Click **Continue**, then **Test step**.
Finally, just publish the integration by clicking **Publish**.

## Conclusion

By using AMP forms, you save your clients time — they don’t need to open a browser or wait for a separate page to load. This greatly simplifies data collection and significantly boosts audience loyalty and engagement.

And if you're creating forms with the [**Pixcraft visual builder**](https://pixcraft.io/builder), you won’t have to deal with the specifics of AMP-form syntax. Instead, you can spend that time crafting more creative marketing campaigns for your company.

Learn how to use AMP-form in email marketing to create interactive emails with forms, feedback collection, and data gathering — all within the email client.


small_amp-form.png

thumbnail_amp-form.png

amp-form.png

How to Create and Use Forms in Email

Why do some emails immediately grab attention while others get ignored? It’s not just about the content and images — the visual presentation of your text plays a major role.

Typography isn’t just about picking beautiful fonts — it’s an entire approach to presenting text visually. The way you use fonts to emphasize certain parts directly affects how your email is perceived and how effective it is.

In this article, we’ll explore which fonts are best for emails, how to choose them, and how to avoid common mistakes that can cost you your readers' attention.

## Types of Fonts for Email

**Sans-serif fonts** — like Arial, Helvetica, Verdana, and Tahoma — appear modern, neutral, and are easy to read on all kinds of screens. Their biggest strengths are readability and versatility. These fonts are ideal for business emails, newsletters, and any communication that prioritizes clarity and accessibility. For body text, Verdana or the more neutral Arial are especially recommended.

<Img  
img="/api/uploads/typography_example_2e8fd02dce.png"  
alt="Example of an email using popular fonts"  
src="The body uses a standard sans-serif font — Arial"  
/>

**Serif fonts**, like Georgia and Times New Roman, give off a more formal, classic vibe. Serifs add a sense of seriousness to the text, which is helpful in official communications or projects where a traditional brand image is key. However, be aware that serif fonts can reduce readability on small screens.

<Img  
img="/api/uploads/typography_times_new_roman_b96b907936.png"  
alt="Email example with elegant fonts"  
src="The body uses a serif font that resembles Georgia or Times New Roman"  
/>

**Script fonts** like Pacifico, Dancing Script, or Lobster bring a casual, emotional feel to emails. They create a sense of personal connection and can boost engagement. That said, script fonts can significantly reduce readability in longer texts, so use them sparingly — only for small accents like headings or short inserts. They are not suitable for body text.

<Img  
img="/api/uploads/typography_script_font_5_11zon_92d657bfd6.jpg"  
alt="Email with a script font"  
src="This email uses a modern serif (like Canela) and an elegant script font (like Bickham Script Pro)"  
/>

**Decorative fonts** (e.g., Impact, Comic Sans, or custom branded typefaces) are designed to attract attention through their unique appearance. They may be suitable for banners, holiday headers, or special promos. But for business emails or long texts, they’re a no-go: they quickly become hard on the eyes and make the content harder to absorb.

<Img  
img="/api/uploads/typography_decorative_font_7758031037.png"  
alt="Decorative font example"  
src="A decorative font is used in the header"  
/>

### Standard vs. Custom Fonts

**Standard (web-safe) fonts** are fonts that come pre-installed on most major operating systems: Windows, macOS, Android, iOS. These fonts render correctly across nearly all email clients without any special setup. Common web-safe fonts include Arial, Verdana, Tahoma, Times New Roman, and Georgia. They guarantee consistent appearance, fast loading, and minimal risk of display issues.

**Custom fonts**, on the other hand, require special inclusion using @font-face or services like Google Fonts. Support for these fonts is extremely limited — they only work reliably in Apple Mail (iOS and macOS) and some versions of Outlook for Mac. In most other cases (e.g., Gmail, Outlook on Windows, mobile apps), the custom font gets replaced by a fallback. This not only breaks the intended design but can also mess up layout.

Using custom fonts in email is only justified in rare cases when you know exactly what email clients your audience is using.  


**@font-face** is practically useless in email design today — with support in [**less than 20% of clients**](https://www.caniemail.com/features/css-at-font-face/), it’s not a viable option. If you try to use a custom font without a fallback, your email may look broken.

The only truly reliable solution is to stick to web-safe fonts. They ensure fast loading, consistent display, and meet the basic UX standards for email design.

There’s one important exception: if you’re using an image (like a banner), you can use any font you want — since it’s a picture, not live text, it will render correctly. This is a good way to preserve brand style, but keep in mind that if the recipient has images turned off, that part won’t load.

### How to Combine Fonts

Using more than two fonts in a single email is not recommended. The ideal combo: one font for the body text and one for headers. For example:

- Georgia for headers and Verdana for body text — gives a classic touch.
- Arial for headers and Times New Roman for body — formal, professional look.
- Trebuchet MS for headers and Arial for text — clean, modern, and very readable.

## Font Size, Line Height, and Contrast: Key Rules for Readable Emails

**Header size** should be much larger than body text. Go for 28–36 px for main headers and 18–24 px for subheaders. This creates clear visual hierarchy and helps guide the reader’s attention.

<Img  
img="/api/uploads/typography_font_size_d67ec48fb6.png"  
alt="Header size in an email"  
src="The headline email appears to be set at approximately 32–36 px"  
/>

**The ideal font size for body text is 16 px.** It’s readable on both desktop and mobile. Anything smaller hurts readability and risks being skipped over.

**Line height** is just as important. Even if your font size is correct, cramped lines are hard to read. A line height of 1.4–1.6 times the font size works best. For 16 px font, use around 22–24 px for line spacing. This makes the text breathe, improves readability, and reduces eye strain.

<Img  
img="/api/uploads/typography_line_height_5cab8d6539.png"  
alt="Font names and line spacing"  
src="Line-height about 1.4–1.5"  
/>

**Text and background contrast** is essential for readability. Low contrast makes text hard to follow and easy to ignore. Dark text on a light background — black on white or dark gray on light gray — is the safest bet. Avoid low-contrast color combos and thin, light-colored fonts on bright backgrounds.

Practical tip: Your email text should be easy to read even when someone scrolls quickly on their phone. Always test readability on different screen sizes before sending.

## Other Details That Make a Big Difference

Good typography isn’t just about fonts and spacing. These basics also have a big impact on the look and feel of your email — even if you don’t notice them right away.

- **Awkward line breaks for short words.** While English typography doesn't strictly forbid prepositions or conjunctions at the end of a line, breaking after very short words like “a,” “an,” “in,” or “to” can look unbalanced. If you’re coding your emails manually, consider using non-breaking spaces to keep these words together with the next one. Tools like [**Pixcraft**](https://pixcraft.io) and the [**TJML framework**](https://pixcraft.io/en/framework) help automate this for a cleaner, more polished layout.
- **Digit grouping.** Large numbers like 10,000 or 1,200,000 should always include commas — it makes them easier to read.
- **Punctuation**. A hyphen (-) is not the same as an em dash (—). Use the em dash for pauses and emphasis. And for quotation marks, American English uses “curly quotes.”
- **Text alignment**. Keep text, buttons, and images consistently aligned — ideally to the left. Don’t justify text — it creates awkward gaps between words and makes it harder to read.
- **Text color**. Your main text should be a neutral dark tone — black or dark gray on a light background. For headers or highlights, one or two accent colors are okay, but avoid going overboard. Too much color clutters the layout.
- **Text emphasis**. Bold and italic are great for short emphasis — like promo codes or important points. But use them sparingly. If everything is bold, nothing stands out.

## Final Recommendations


- **No more than two fonts.** One for headings and one for body text. Any more than that makes the email look cluttered.
- **Font size should be 14–16 px.** Anything smaller becomes hard to read, especially on mobile devices.
- **Let the text breathe.** Use a line height of 1.4–1.6. This keeps lines from crowding together and makes the content easier to read.
- **Dark text on a light background.** The most reliable option is black or dark gray on white. Complex color combinations reduce readability.
- **Don’t use text as images.** These emails can’t be read by screen readers and may not load properly.

How to choose the right font, size, and spacing for your emails to improve readability, keep attention, and increase conversion rates.


small_typography-in-emails.png

thumbnail_typography-in-emails.png

typography-in-emails.png

Email Typography: How to Make Your Text Easy to Read

You've launched your business, started building an audience, and of course, added a newsletter signup form. But what's next? A lonely welcome email and occasional holiday blasts just won’t cut it anymore. Today, email marketing is about consistency, personalization, and dialogue. That’s why email sequences are essential.  

Automated email series (or "email sequences") help you do more than stay top of mind — they let you build real relationships: to introduce, educate, and sell. This is especially crucial in the early stages, when every subscriber counts and the path from interest to purchase should be simple and smooth.  

This article explores the must-have email sequences to implement right from the start, what they do for your business, and how to make them not just useful but truly engaging with interactive elements and AMP.

## Welcome Sequence

<Img  
img="/api/uploads/email_sequence_welcome_4_11zon_546e6cacca.jpg"  
alt="Welcome Email" 
src="Source: reallygoodemails.com"
/>

**Welcome sequence** is a series of emails triggered right after a new user signs up. It’s one of the first points of contact with a potential customer, and how you handle it can shape your future relationship.  

The very first email should be a DOI (Double Opt-In) — asking the user to confirm their subscription. Once confirmed, the welcome series begins.  

Here's a clever trick for DOI: AMP-forward link. It allows the user to confirm their subscription directly in the email, without leaving it. Right after the click, you can gently ask for more details — like phone number or birth date.

**Key aspects of a welcome sequence:**

- **When it starts:** Immediately after the user confirms their email, signs up on the website, registers for a service, or makes a first purchase.
- **Purpose:** To introduce your brand, highlight your products or services, and build trust. It reduces hesitation and guides the user toward a first meaningful action (purchase, profile setup, etc.).
- **Number of emails:** Typically 3–4. They thank the user, welcome them, and introduce your brand and offers.
- **Interactive elements:** Great for collecting user data. Add a preference survey or a carousel with product suggestions users can scroll through right in the email. You can also ask for feedback using a scale or buttons to get valuable insights.

## Onboarding Sequence

<Img  
img="/api/uploads/email_sequence_onboarding_2_11zon_6a06348cd5.jpg"  
alt="Onboarding Email"  
/>

**Onboarding sequence** is a series of emails designed to help customers understand and get the most out of your product or service — especially helpful after a first purchase or signup for a complex tool.

**Key aspects of an onboarding sequence:**

- **When it starts:** After a user registers for your service, purchases a product, or subscribes to a course.
- **Purpose:** To explain how to use your product, walk through features, offer tips, and prevent common issues. A well-onboarded user is more likely to stay and buy again.
- **Number of emails:** Usually 3–5. For example, email 1 thanks the user and shares a startup guide, email 2 breaks down key features or shares a tutorial, and email 3 answers FAQs. Later, follow up for feedback or offer help.
- **Interactive elements:** Use AMP to create expandable FAQ sections or step-by-step guides. These make emails easier to digest and give users a sense of progress.

## Sales Sequence (Conversion-Focused)

<Img  
img="/api/uploads/email_sequence_abandoned_cart_1_11zon_2eae63fd4c.jpg"  
alt="Sales Sequence"  
/>

**Sales sequences** are focused on converting leads into paying customers. They’re triggered when someone shows interest but hasn’t completed a purchase — like downloading a freebie or abandoning their cart.

**Key aspects of a sales sequence:**

- **When it starts:** When a user is exploring but hasn’t bought yet — after downloading a lead magnet, visiting a pricing page, abandoning a cart, or viewing a product.
- **Purpose:** To move users closer to a purchase. These emails build trust, handle objections, and highlight the value of your offer.
- **Number of emails:** Varies. For warm leads, 2–4 emails work well: offer value, address concerns, and close with a strong offer. For cart abandonment, 2–3 emails: the first within hours, a second the next day, and a third a few days later with a discount.
- **Interactive elements:** Product carousels are great — especially in fashion, tech, or furniture — showing different angles or styles directly in the email to spark action.

## Retention Sequence (Repeat Sales)

<Img  
img="/api/uploads/email_sequence_restock_3_11zon_bbc3b0cf52.jpg"  
alt="Retention Sequence"  
/>

**Retention sequences** aim to turn one-time buyers into loyal customers. Loyal customers are more profitable and cheaper to retain than acquiring new ones. Also called post-purchase or re-engagement flows.

**Key aspects of a retention sequence:**


- **When it starts:** After a purchase. It could also be triggered when a subscription is about to expire or it's time to reorder.
- **Purpose:** To stay in touch and encourage the next purchase — share usage tips, suggest related items, or offer loyalty perks.
- **Number of emails:** Typically 2–4 per cycle. Email 1 thanks them and gives order info. Email 2 asks for feedback. Email 3 suggests complementary products. Email 4 reminds them to reorder or offers a special deal.
- **Interactive elements:** AMP surveys are great here — quick ratings, feedback forms, or emoji reactions right in the email.

## Re-engagement Sequence (Bring Back Inactive Users)

<Img  
img="/api/uploads/email_sequence_we_miss_you_5_11zon_6219500abc.jpg"  
alt="Re-engagement Sequence"  
/>

Over time, some subscribers stop engaging. **Re-engagement sequences** aim to wake up these users or clean your list if interest is gone for good.

**Key aspects of a re-engagement sequence:**
- **When it starts:** When a user is classified as inactive — based on your business rules, e.g., 3–6 months without opens or purchases.
- **Purpose:** To rekindle interest or unsubscribe inactive users. Remind them of your brand, share updates, or offer a strong incentive.
- **Number of emails:** Usually 2–3. Start with a soft reminder, follow with a bold offer or announcement, and end with a goodbye email (with a one-click resubscribe option).
- **Interactive elements:** Use games or quizzes to boost engagement — like puzzles, “build your perfect product,” or update preference forms using AMP.

## How to Make Emails Interactive

You don’t have to be a developer to create interactive emails. Tools like [**Pixcraft**](https://pixcraft.io/) let marketers build AMP emails with interactive blocks using a visual editor — or [**Figma**](https://www.figma.com/community/plugin/1403763341617358835/).  
Pixcraft offers ready-made blocks: surveys, product carousels, ratings, live comment feeds. You just drag-and-drop elements, add text and images, and the platform generates valid AMP code.  

Start with the most important sequences — the must-haves covered above. With Pixcraft, it’s easy to embed surveys into welcome emails, create beautiful product carousels in sales emails, and add dynamic content.

## Conclusion

Email sequences are the foundation of effective email marketing. Welcome, onboarding, sales, retention, and re-engagement flows create a structured dialogue with your audience — from first contact to repeat purchases and reviving inactive users.  
By using AMP interactivity — for example, via Pixcraft — you amplify their impact: emails become not only informative but engaging. This builds trust and lays the groundwork for sales growth from day one.  

Pay special attention to trigger-based emails — they’re far more effective than mass blasts since they respond to specific user actions. The best place to start automation is with these scenarios: welcome flows, post-purchase emails, reorder reminders. They create a sense of personal touch and foster stronger connections with each customer.  

And if you want to level up your email marketing skills, check out our [**Telegram channel**](https://t.me/pixcraft_io) — we share useful tips, tricks, and ideas every week.

Let’s explore which email sequences you should launch first, how they benefit your business, and how to make each email not just useful but engaging.

small_email-sequence.png

thumbnail_email-sequence.png

email-sequence.png

Must-Have Email Sequences Every Business Should Be Using

Before sending out an email campaign, it's important to thoroughly test it. Even a small mistake in an email can lead to lower engagement, increased unsubscribes, and damage to your brand's image. We’ve all received emails with broken links or missing images — not exactly confidence-inspiring.

Email remains one of the most effective marketing channels, with an impressive ROI — [**up to 264%**](https://www.mailgun.com/blog/deliverability/deliverability-impacts-roi/#:~:text=%E2%80%9CEmail%20has%20the%20highest%20ROI,have%20to%20do%20it%20right). But to get results, you need to avoid mistakes at every level — from visuals to technical setup.

Here’s a detailed checklist of what to test before sending, so your emails look professional and actually deliver results.

## Step 1: Visual Check

What to look for:

**1.** **Match with the design layout.** First, check how closely the final email matches the original design. Compare padding, fonts, colors, and alignment — the easiest way is to take a screenshot of the coded version and place it side-by-side with the design mockup. Then, draw horizontal guides across both. The guides should hit the same elements in both views. This simple method helps spot differences quickly — whether it's text that wasn’t updated, images missing, or spacing inconsistencies.

**2.** **How it looks without images.** Many desktop email clients (especially corporate ones like Outlook) block image loading by default. Make sure every image includes alt text. For example, if it’s a button, the alt text should match the label: “Download report” instead of “image1.” This ensures your message is clear even without visuals and improves accessibility. To preview your email without images, you can temporarily rename the image folder next to your HTML file.

<Img
img="/api/uploads/email_testing_pics_not_working_2_11zon_de70efc412.jpg"
alt="Image display issue in email"
src="Images didn’t load — the email won’t leave a good impression"
/>

**3.** **Dark mode display.** When users enable dark mode, email apps often invert light backgrounds and text colors. Gmail on iOS is especially aggressive — it fully inverts colors, turning light designs dark and vice versa. To avoid surprises, test your email in dark mode across different clients and devices. 

<Img
img="/api/uploads/dark_mode_testing_710a596e64.jpg"
alt="Dark mode in email"
src="Email in Gmail dark mode. Logo blends into the background"
/>

To streamline testing, use modern tools. The [**Pixcraft email builder**](https://pixcraft.io/builder) lets you compare your HTML to the original design and preview it in light/dark mode across different screen sizes.

## Step 2: Technical Check

Even if your email looks great, it might not reach subscribers or break in certain email clients due to technical issues. Here's what to check before sending:

**1.** **Correct HTML structure.** Errors like unclosed tags or improper nesting can cause rendering issues. Run your code through a validator like [**W3C**](https://validator.w3.org/) to spot problem areas. While email HTML supports some older tags, clean and consistent code is still essential — especially for deliverability and consistent display.

**2.** **All links work properly.** Click through your email and verify every button, link, and anchor takes the user where it should. Broken or incorrect links are one of the most common — and damaging — mistakes. Users won’t go looking for the right link, they’ll just close the email.

**3.** **UTM tags are in place.** If you're tracking performance (and you should be), UTM parameters are a must. Without them, traffic from the email will be lumped in with other sources, and you won’t know what actually worked. Double-check every link for ```utm_source```, ```utm_medium```, ```utm_campaign```, etc.

**4.** **Unsubscribe link is included.** Sending bulk emails without an unsubscribe option is a one-way ticket to the spam folder. Make sure the link is functional, leads to the correct page, and is easy to find.

<Img
img="/api/uploads/email_testing_unsubscribe_link_3_11zon_224d6e345c.jpg"
alt="Example of an unsubscribe link"
/>

**5.** **Plain-text version is included.** Your email should have both HTML and plain-text versions — a standard feature in reputable email platforms. Plain-text emails boost sender reputation and are used by spam filters to determine if your message is real or just a template blast. Make sure your plain-text version is readable: no code, proper line breaks, working links, and clear content.

**6.** **HTML size is under Gmail's limit.** Gmail clips emails over 102 KB, showing a message like “[Message clipped] View entire message.” That means your final CTA or key content might go unseen. The open tracking pixel, usually at the bottom, may also fail to load, giving you inaccurate open rates.

**7.** **JSON-LD and AMP work without errors.** If your email uses JSON-LD, validate it using a structured data tool. [**This article**](https://pixcraft.io/blog/smart-cards-and-order-status-using-json-ld-in-email-campaigns) has helpful examples. For AMP emails, check the AMP code with the [**official Playground**](https://amp.gmail.dev/playground/) to ensure everything renders correctly — even small errors can prevent AMP from working and fall back to standard HTML.

## Step 3: Content Check

**1.** **Subject line and preheader.** The subject should be clear, relevant, and non-spammy. Most email clients cut it off after 50–60 characters.

The preheader complements the subject line, adds value, and encourages opens. It’s usually set in a separate field in your email tool or hidden using styles in the first visible line of the email.

**2.** **Rendering across email clients.** Emails can look very different in Gmail vs. Outlook vs. Apple Mail. Always test your message in multiple clients and devices.

Tools like **Litmus**, **Email on Acid**, **Testi@**, and others help identify rendering issues, background glitches, unreadable text, or code errors. They’re especially useful for complex layouts or custom elements. Some tools even flag spam triggers and offer improvement tips.

**3.** **Testing on real devices.** Emulators are useful but can’t fully replace real-world testing. If possible, send your email to yourself on different devices.

Check how it looks in Gmail on Android, Mail on iPhone, and Outlook. Open it on laptops and desktops in various browsers. Look for image loading, mobile scaling, font size, and button tap targets.

You might catch things that previews miss — animations that don’t work, AMP blocks that don’t load, or blurry images. If you lack test devices, ask colleagues to check and send screenshots.

## Step 4: Dynamic Content Check

This step applies if your email includes dynamic content that changes per recipient — like triggered emails, personalized product recommendations, or segmented offers. You need to ensure each scenario displays correctly.

If you're using conditional blocks, check that all rules are set correctly and display for the right audience. Make sure there are fallback blocks or hidden sections in case of missing data — your email should never display empty spaces.

Test major content versions by sending test emails to multiple addresses with different parameters (e.g., VIP, new customer, no name, no preferences). Make sure each recipient sees the right version, no “wrong” blocks appear, and no variables are left blank.

If you have lots of variations and can’t check them all, at least cover the most critical ones. Also consider the complexity: overly dynamic logic can slow delivery or cause errors — sometimes simpler is more reliable.

## Conclusion

Testing your email before sending isn’t an extra step — it’s essential for avoiding mistakes, protecting your reputation, and increasing performance.

Here’s a quick checklist to keep on hand:

- Visual check: design match, image-free version, dark mode preview  
- Technical check: valid HTML, working links, UTM tags, plain-text version  
- AMP and JSON-LD (if used): validated and error-free  
- Subject + preheader: correct and personalized  
- Client tests: rendering across email apps and devices  
- Dynamic content: rules, fallbacks, and proper personalization

Make testing a habit. It saves time, stress, and ensures every email you send performs its best.

Full checklist for email testing before sending: how to avoid mistakes, improve deliverability, and make your campaign truly effective.

small_checklist-testing-email.png

thumbnail_checklist-testing-email.png

checklist-testing-email.png

Checklist: What to Test Before Sending an Email

In today's e-commerce landscape, businesses need to do more than just offer quality products—they must also ensure a seamless customer experience at every stage, including email communication. Implementing JSON-LD structured data in email campaigns helps businesses stand out from competitors and makes it easier for customers to access key information.

## JSON-LD Structured Data

**JSON-LD** is a format for transmitting linked data. In the context of email campaigns, JSON-LD allows information to be transformed into interactive elements within email clients. This is done by embedding the required code into the ```<head>``` section of the email's HTML, enabling email services to display structured data.

JSON-LD is not exclusive to email; it is also widely used in website and page optimization. However, these use cases should not be confused, as JSON-LD in websites primarily serves SEO purposes.

In emails, JSON-LD utilizes the schema.org vocabulary. A basic structure looks like this:

```JSON-LD
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "..."
…
}
</script>
```
## Features in Gmail

Google was the first to use JSON-LD in its emails and continues to add more use cases for it. The functionality of the format can be divided into:

**1.** **Actions** are quick action buttons that appear in the inbox list and allow users to perform a specific action without opening the email. There are 2 types:

- **One Click Actions**. Suitable for confirming something without going to the website. This is ideal for confirming a subscription, for example.

- **Go to action**. Suitable for navigating to a link with one click.

<Img
img="/api/uploads/JSON_LD_example_1_4e9c63d874.png"
alt="JSON-LD in emails"
src="Example of using Go to Action"
/>

- **Orders**. Information about orders and everything related to them. This includes: main order information, shipping information, and payment details.

<Gallery>
<GalleryItem
original="/api/uploads/json_ld_1_d68dbb591b.png" 
thumbnail="/api/uploads/json_ld_1_d68dbb591b.png"
description="JSON-LD in emails. Orders"
/>
<GalleryItem
original="/api/uploads/json_ld_2_195b283d27.png"  
thumbnail="/api/uploads/json_ld_2_195b283d27.png"
description="JSON-LD in emails. Orders"
/>
<GalleryItem
original="/api/uploads/json_ld_3_2219d55634.png" 
thumbnail="/api/uploads/json_ld_3_2219d55634.png"
description="JSON-LD in emails. Order information"
/>
</Gallery>

- **Reservation** includes: bus tickets, train tickets, flight booking, event/activity, hotel booking, restaurant reservations, car rental.

<Gallery>
<GalleryItem
original="/api/uploads/json_ld_bus_73dc05db9c.png" 
thumbnail="/api/uploads/json_ld_bus_73dc05db9c.png"
description="JSON-LD in emails. Ticket reservation"
/>
<GalleryItem
original="/api/uploads/json_ld_car_rental_fdfa291631.png"  
thumbnail="/api/uploads/json_ld_car_rental_fdfa291631.png"
description="JSON-LD in emails"
/>
<GalleryItem
original="/api/uploads/json_ld_event_beaab2871b.png" 
thumbnail="/api/uploads/json_ld_event_beaab2871b.png"
description="JSON-LD in emails"
/>
<GalleryItem
original="/api/uploads/json_ld_flight_81f369d7a0.png"  
thumbnail="/api/uploads/json_ld_flight_81f369d7a0.png"
description="Using JSON-LD"
/>
<GalleryItem
original="/api/uploads/json_ld_hotel_107654e7b2.png" 
thumbnail="/api/uploads/json_ld_hotel_107654e7b2.png"
description="JSON-LD: usage examples"
/>
<GalleryItem
original="/api/uploads/json_ld_restaurant_afd2764215.png" 
thumbnail="/api/uploads/json_ld_restaurant_afd2764215.png"
description="JSON-LD"
/>
<GalleryItem
original="/api/uploads/json_ld_train_b657c56dfe.png"  
thumbnail="/api/uploads/json_ld_train_b657c56dfe.png"
description="JSON-LD in emails"
/>
</Gallery>

- **Annotations**. This is information that is displayed before opening the email if it ends up in the "Promotions" tab. It may include product cards, discount information, and promo codes. Bright cards in the "Promotions" list will surely attract the subscriber's attention, reduce the steps to click through to the website, and prevent automatically generated cards with poor images.

<Img
img="/api/uploads/json_mail_example_11zon_135e8dd4e1.jpg"
alt="JSON-LD in emails. Annotations"
src="JSON-LD in emails with annotations"
/>

The broad capabilities of the format in Gmail allow creating user-friendly email campaigns. To use all JSON-LD features in Gmail, you need to go through a registration procedure, similar to sending AMP emails. First, your domain must meet [**Google's requirements**](https://developers.google.com/workspace/gmail/markup/registering-with-google#registration_guidelines). Second, you must send a sample email with JSON-LD to a special email address (schema.whitelisting+sample@gmail.com). Third, you need to fill out a special [**form**](https://docs.google.com/forms/d/e/1FAIpQLSfT5F1VJXtBjGw2mLxY2aX557ctPTsCrJpURiKJjYeVrugHBQ/viewform?pli=1&hl). Only after these steps can you expect approval from the email provider.

You can read more about the approval conditions for your emails in the [**official documentation**](https://developers.google.com/workspace/gmail/markup/registering-with-google), and full information on using JSON-LD in Gmail is available [**on this page**](https://developers.google.com/workspace/gmail/markup/reference).

For testing, you can send yourself an email from the same Gmail account. The most convenient way to do this is by using the [**Google Scripts**](https://script.google.com) service. The main script would look something like this:

```JavaScript
function testSchemas() {
  var htmlBody = HtmlService.createHtmlOutputFromFile('Email.html').getContent();

  MailApp.sendEmail({
	to: Session.getActiveUser().getEmail(),
	subject: 'JSON LD',
	htmlBody: htmlBody,
  });
}
```
And next, you need to add a file with the test template, in our case, Email.html.

## Testing Templates with JSON-LD

It’s always recommended to test your email templates with JSON-LD (as well as any other interactive elements). There are several ways to do this:

- Using dedicated validators like [**Schema Validator**](https://validator.schema.org/). Some email providers also offer their own tools, such as [**Google's Markup Tester**](https://www.google.com/webmasters/markup-tester/u/0/?hl).

- Using validators originally designed for website structured data. However, keep in mind that email code has unique characteristics that differentiate it from website code.

- Launching a test campaign. The most reliable method that helps quickly check how JSON-LD is displayed across multiple email clients.

<Note>We have already discussed checking rendering and testing campaigns in one of our [**blog articles.**](https://pixcraft.io/blog/email-template-compatibility-testing-how-to-avoid-errors-across-devices-and-email-clients#jsonld-support) JSON-LD was also mentioned there separately.</Note>

## Conclusion

All the email clients described in the article essentially display order information, although it is presented in different formats. The presence of such cards makes emails stand out from regular newsletters and creates a positive impression of the brand among customers. It is important to remember that when using JSON-LD, you should carefully check the correctness of email rendering in popular email clients using specialized tools.

Customer focus, along with [**other email marketing trends**](https://pixcraft.io/blog/email-marketing-in-2025-staying-ahead-of-the-competition), is one of the key factors for successful communication with customers. By incorporating JSON-LD into your emails, you’re not just improving the user experience, but creating a whole new level of engagement that significantly boosts loyalty to your company.


JSON-LD in email campaigns helps emails stand out from competitors and makes it easier to access important information. Let's explore how to use structured data.


small_JSON-LD.png

thumbnail_JSON-LD.png

JSON-LD.png

Smart Cards and Order Status: Using JSON-LD in Email Campaigns

**Guideline (or Design Guide)** is a document that helps maintain consistency and uniformity in design. It defines how repeating elements should look, which styles to apply, and how to correctly use ready-made components. Figma is the most suitable tool for creating email template guidelines for newsletters. With its features (components, variants, instances, variables, etc.), Figma simplifies working on email templates and speeds up making edits.

This article explores components, variants, and variables in Figma and how they can help create a cohesive guideline.

## What is a Component?

A **component** is a template for an element whose copies **(instances)** can be used in different parts of a project. Any changes made to the component will automatically update all its instances. You can create a component from the context menu when selecting an object, group, or frame, or by using the shortcut **Ctrl + Alt + K**.

<Img
img="/api/uploads/Create_Component_figma_guideline_1765657900.png"
alt="Creating a component"
/>

Components make it quick and easy to add elements to a layout while maintaining a consistent style and design approach. They are also a fundamental part of any guideline. First, new elements created from a component will preserve the project's design consistency. Second, if you need to update the structure of an element in your guideline, you only need to edit the component, and all its instances will automatically reflect the changes.

Component libraries, as well as project-specific components, are available in the **Assets** panel. You can use both local components created within your project and components from linked libraries.

<Img
img="/api/uploads/Assets_pixcraft_8005847922.png"
alt="Assets"
/>

Components are usually stored in a separate project file. This allows all team members to quickly access these elements with predefined size, positioning, and style settings.

You can always navigate from an instance to its main component by right-clicking any copy and selecting **Main component – Go to main component**. In the same menu, you can also push instance changes to the main component.


<Img
img="/api/uploads/Push_Changes_guideline_for_figma_06e068cd5d.png"
alt="Main component"
/>

## Component Instance

An **instance** is a copy of a main component that inherits its properties but can be partially modified. Instances allow you to override content such as text, images, and colors while maintaining a connection to the original component.

### How Instances Work

- If you **edit the main component**, all instances will update automatically.
- If you **modify an instance**, the changes apply only to that instance and do not affect the main component.
- If you **detach an instance**, it becomes a regular object and loses its link to the component.

<Img
img="/api/uploads/pixcraft_master_component_gif_4c32f89be5.gif"
alt="Creating a component"
/>

## Component Variants

When designing a guideline, you often need to display multiple states of the same interface element. For example, a button may have a default, disabled, pressed, or hovered state. While you could create a separate component for each state, this approach leads to structural redundancy, complicates maintenance, and makes the design process less efficient.

To address this, Figma provides variants, allowing you to group multiple states within a single component.

**Variants** enable you to combine multiple components with different states or properties into a single component with toggleable parameters. Instead of creating multiple separate components (e.g., a button in different states), you can use a **variant component** with switchable properties. Variants also improve navigation in the **Assets** panel.

It's important to note that a component variant is not a full-fledged instance, meaning changes between variants **are not synchronized**.
To add a new variant, right-click the main component and select **Main component – Add variant**. In the future, you can add new variants directly in the project workspace:

<Img
img="/api/uploads/figma_guideline_gif1_d6d4e6c02a.gif"
alt="Component variant"
/>

## Nested Components

Components can also be used **inside other components**, allowing you to modify specific elements directly within an instance.

<Img
img="/api/uploads/figma_guideline_gif2_a1914362e8.gif"
alt="Nested components"
/>

The easiest way to manage nested components is by using **Properties**.

## Component Properties

When your project contains only a few different elements, working with component variants is convenient. However, if you need to configure multiple elements—such as numerous input fields with different states—it’s more efficient to use **component properties**. 

**Component properties** allow you to adjust component instances without changing their structure. They offer more flexibility than variants and make components more versatile.

Managing a single component with multiple properties is the most complex approach, but it’s also the most universal, efficient, and space-saving. By eliminating the need to handle each variant separately, designers can significantly streamline their workflow.

<Img
img="/api/uploads/figma_guideline_gif3_0045c490a1.gif"
alt="Add object"
/>

Figma offers **four** main types of properties:

- Text Properties.
- Boolean Properties.
- Instance Swap Properties.
- Variant Properties.

Let's go over each in detail.

### Text Properties

These allow you to edit text within a component directly in the **Design** panel without breaking its connection to the main component. This type of property makes it easy to customize text fields in any instance.

**How to create:**

**1.** Select a text layer inside the main component.

**2.** In the right-hand panel, find **Content** and click **Create Property**.

**3.** Name the property (e.g., label).

After this, you’ll be able to edit the text content of that field in any instance directly from the toolbar.

### Boolean Properties

These enable toggling elements within a component on or off. The values can be either **true** or **false**. Boolean properties are useful for showing or hiding icons in buttons or adding temporary elements (such as a discount badge on a product card).

**How to create:**

**1.** Select the required element inside the component.

**2.** In the **Layer** panel, click **Create Property – Boolean**.

**3.** Name the property (e.g.,```show_icon```).

### Instance Swap Properties

These allow you to **swap one nested component for another** without breaking the connection to the main component. This is useful for replacing an icon within a button (e.g., icon = arrow – icon = check).

**How to create:**

**1.** Select the nested component inside the main component.

**2.** In the **Design** panel, find **Instance Swap** and create a new property.

**3.** Name the property (e.g., ```icon_variant```).

### Variant Properties

These let you switch **existing component variants** via settings instead of manually selecting them from the Variants panel. For users familiar with component properties, this method provides a more intuitive way to interact with variants.

**How to create:**

**1.** Create multiple variants of a component.

**2.** In the Variants panel, group them and assign properties (e.g., type, state).

Component properties can also be defined directly in the component’s name using the format `key=value, key=value`. Properties are one of the more advanced aspects of working with components, but mastering them allows designers to create highly flexible and adaptable elements for their templates.

## Variables

In addition to components, one of the key tools for building a design guideline is **variables**. **Variables** in Figma are values that can be set and reused across different design elements. They make designs more flexible, scalable, and easier to manage, especially in large projects and design systems.

Variables work **similarly to CSS variables** (`--primary-color, --spacing-lg`), making it easy to transfer them into code for development. You can configure them in the **Design** panel by clicking on an empty area of the workspace.

<Img
img="/api/uploads/figma_guideline_gif4_00e490f952.gif"
alt="Variables"
/>

To export variables and styles from Figma as CSS variables, you can use the  [Pixcraft plugin](https://www.figma.com/community/plugin/1332412206147274506/export-styles-and-variables-to-css).

 Figma supports four types of variables:

- Color Variables.
- Number Variables.
- String Variables.
- Boolean Variables.

### Color Variables

Used to store color and gradient values. They help define:

- Primary and secondary colors
- Text colors (Text-Primary, Text-Secondary).
- Background colors (Background, Surface).
- State colors (Hover, Disabled).

In Figma, these colors can be applied to fills, strokes, shadows, and gradients.

### Number Variables

Used to store numeric values such as sizes, spacing, and border radii. Examples include:

- Font sizes (FontSize-Small, FontSize-Large).
- Border radii (Border-Radius, Card-Radius).
- Spacing values (Spacing-XS, Spacing-L).

### String Variables

Used to store text values such as button labels or headings. They can be applied to:

- Button labels (Button-Label-Primary).
- Dynamic content (UserName, Product-Title).
- Localization (Locale-EN, Locale-ES).

### Boolean Variables

Used to toggle visibility (on/off). Examples include:

- Showing or hiding elements (Show-Icon, Show-Badge)
- Switching between light and dark mode (DarkMode-Enabled).

In Figma, boolean variables control layer visibility.

Также созданные переменные можно группировать в коллекции, например:

- Theme – Light / Dark.
- Spacing – XS / S / M / L.
- Typography – Heading / Body / Caption.

## Creating an Email Guideline

### Analysis and Planning

At this stage, it's important to thoroughly review existing email templates, identify their strengths and weaknesses, and outline common usage scenarios. Determine which elements need standardization, such as headers, buttons, images, text blocks, and links. Collaborate with marketers, designers, and developers to ensure no crucial detail is overlooked.

<Img
img="/api/uploads/Templates_developing_a_guideline_466285639e.png"
alt="Templates"
/>

### Creating a Design System

A **design system** establishes a consistent style for all future email templates. It includes colors, fonts, sizes, spacing, and link styles. At this stage, **variables and styles** will be particularly useful. Styles allow you to centrally manage colors, fonts, and effects for project elements, while variables ensure quick adaptation of designs to new requirements and conditions.

A **design system** establishes a consistent style for all future email templates. It includes colors, fonts, sizes, spacing, and link styles. At this stage, **variables and styles** will be particularly useful. Styles allow you to centrally manage colors, fonts, and effects for project elements, while variables ensure quick adaptation of designs to new requirements and conditions.

<Img
img="/api/uploads/Vars_design_guide_998312603a.png"
alt="Creating a Design System"
/>

### Building Components

Creating components ensures consistency and simplifies the use of individual elements in templates. Start by defining the key components—typically, these include the header, footer, buttons, images, and text blocks. Develop a separate component for each element with customizable parameters and states.

<Img
img="/api/uploads/Components_guideline_figma_7612fc18ed.png"
alt="Building Components"
/>

### Auto Layout and Responsiveness

For email campaigns, it’s crucial that the design displays correctly on different devices and screen sizes. Using **Auto Layout** in Figma makes components and templates flexible, automatically adjusting to content. Set up auto-alignment so templates easily adapt when content or screen sizes change.

### Documentation

Documenting all created components and usage guidelines is a key stage in developing the guideline. Create a dedicated page in Figma with detailed instructions and recommendations for each component, along with specifics on setting up variables and auto-layout.

### Testing and Optimization

Conduct internal testing with designers and developers to evaluate the usability of components and the accuracy of descriptions. Gather feedback, identify challenges, and refine the guideline for maximum practicality and efficiency. Keep in mind that the guideline should be updated regularly to align with changes in your marketing strategy.

<Img
img="/api/uploads/Versions_developing_a_guideline_cf57ba3abb.jpg"
alt="Testing"
/>

## Conclusion

Creating an email template guideline in Figma is an investment in long-term efficiency and design consistency. Well-structured components and variants make the email-building process similar to assembling with "building blocks"—you quickly create an email from a set of pre-approved elements, modifying only what’s necessary.

This approach saves time, ensures a unified style, and simplifies future updates. By following these steps and continuously updating the guideline, you can maintain a high-quality, modern, and scalable email design. For even faster interactive email creation, you can use the [**Pixcraft Email plugin**](https://www.figma.com/community/plugin/1403763341617358835) for Figma.

In this article, we’ll explore components, variants, and variables in Figma and how they simplify guideline creation.

small_figma.png

thumbnail_figma.png

figma.png

Developing a Guideline in Figma: Components, Variants, and Variables

A CTA in an email is the button that leads subscribers to take action. If it’s hard to find, the text doesn’t stand out, or the button isn’t mobile-friendly, your email may go unnoticed.

It’s not just about choosing the right words—you also need to consider placement, design, and size. Even animation and white space around the button can impact results.

In this article, we’ll break down which [**CTAs**](https://altcraft.com/blog/what-is-cta) attract more clicks, why bulletproof buttons are essential, and how to test different versions to find the most effective one.

## How Many Buttons You Need and Where to Place Them

Email buttons should be clear and noticeable. If the design is confusing, users might not know where to click. A CTA should have an obvious look so that people immediately recognize it as a clickable element.

<Img
img="/api/uploads/cta_buttons_pixcraft_no_buttons_2aa79f452c.png"
alt="Email Without a Button from Sporcle"
src="There’s no button here, but the text is clickable. Users may not realize where to click to reach the website."
/>

If an email has multiple buttons, they should be prioritized. Use one style for primary actions and another for secondary ones. Typically, two variations are enough to keep the structure clear without overloading the email with unnecessary elements.

<Img
img="/api/uploads/effective_buttons_two_types_of_buttons_pixcraft_bfdc652623.png"
alt="Two Button Styles from Academia.edu"
src="This email uses two types of buttons."
/>

Too many buttons in a single email can confuse the reader. It's better to keep only the most important CTAs and arrange them in a way that makes the path to the desired action clear.

<Img
img="/api/uploads/cta_buttons_pixcraft_too_many_buttons_668204a936.png"
alt="Too Many Buttons in an Email from Taste of Home"
src="This email is overloaded with buttons."
/>

## Which Wording Works Best?

The text on a button directly impacts click-through rates. A good CTA should be clear, attention-grabbing, and action-oriented. But should it be short or detailed, creative or straightforward?

**Short vs. Long CTAs.** Short CTAs (“Buy,” “View,” “Try”) are familiar and easy to read. They work well when the action is obvious, and the context is clear without extra words—especially when there's already an explanation before the button.

Longer CTAs (“Get Free Access,” “Choose a Plan and Subscribe”) can be more effective when users need extra reassurance. They work well for complex topics where additional motivation is required.

Short CTAs are more suitable for mobile emails since they are compact and easy to tap. Longer ones help convey the value of the action when necessary.

**Clarity vs. Creativity.** A unique CTA can grab attention, but if its meaning isn't clear, fewer people will click. For example, “Open the Door to the Future” sounds intriguing, but it’s not immediately obvious what happens when you click. Meanwhile, “Sign Up for a Course” is straightforward and easy to understand.

Creative CTAs work well when they align with the brand’s tone and are instantly clear. For an online store, for example:

- “Add to Cart” – clear and familiar
- “Save for Later” – a bit more creative but still understandable.
- “Stash Away” – fun, but might be confusing.

<Img
img="/api/uploads/cta_buttons_pixcraft_strange_f34a51c0f1.png"
alt="CTA Example from Headspace"
src="The button is creative, but not everyone may understand what happens when they click."
/>

**What to Test?**

- If a standard CTA isn’t delivering good results, test different variations: concise, detailed, or emotional.
- Use action-oriented verbs like “Get,” “Sign Up,” “Download.”
- Add urgency or a benefit: “Book with a Discount,” “Download for Free.”
- Avoid vague wording: “Okay,” “Next,” or “Done” without context can be confusing.

## What CTA Buttons Should Look Like

### Size

Buttons in mobile interfaces should be large enough to tap easily. A recommended minimum size is 44×44 px.

Buttons that are too small make users adjust their finger position, forcing them to tap with the tip instead of the pad. This slows them down and requires more effort. If buttons are too close together, accidental clicks become more likely—especially with larger thumbs.
The average width of an adult’s index finger is 1.6–2 cm (45–57 px), while a thumb is about 2.5 cm (72 px). Buttons of this size are easier to tap accurately, improving interaction speed.

<Img
img="/api/uploads/cta_buttons_pixcraft_big_button_c0a9f4730b.png"
alt="CTA for Mobile Devices"
src="This button is large, making it easy to tap accurately."
/>

Tablets allow for larger buttons, but mobile screens have limited space. If everything is oversized, you’ll run out of room. Finding the right balance—keeping only essential buttons—is key.

### Button Shape

Experimenting with design is great, but if a button doesn’t look like a button, users might not notice it. It’s best to use familiar shapes:

- Rounded. 
- Rectangular.
- Capsule-shaped.
- Transparent.
- Buttons with shadows.

<Img
img="/api/uploads/Button_Shapes_b99cf61272.png"
alt="Button Shapes"
/>

### Space Around the Button

A button should stand out, not get lost among other elements. To achieve this, it needs enough surrounding space. This is especially important on mobile devices—if buttons and links are too close together, users might tap the wrong one by mistake. 

### Visual Feedback

Simple animations make buttons more noticeable and enjoyable to use. [**Studies show**](https://www.sixthcitymarketing.com/2023/03/24/statistics-to-know-about-ctas-in-2023/) that visual effects like these can increase click-through rates by 26%.

The easiest option is to add a response to hovering or clicking—such as changing color, slightly enlarging the button, or adding a glow. These small details draw attention and make interactions feel more natural.

Such enhancements engage users and improve email click-through rates. The key is not to overdo it—animations should enhance usability, not distract from it.

## How to Choose the Best Button Design

Even small changes in button design or wording can impact click-through rates. But how do you know what works best? Testing is the only way to validate assumptions and find the most effective option.

**What to Test?**

When testing buttons, consider the following:

- **Text** — short vs. long CTA.
- **Color** — bright and high-contrast vs. neutral and design-friendly.
- **Shape** — classic rectangular, rounded, or capsule.
- **Size** — small vs. large and attention-grabbing
- **Placement** — at the beginning, middle, or end of the email.

**How to Test?**

You can use platforms that automate the process. For example, [**Altcraft Platform**](https://altcraft.com/features/mvt) offers different testing formats:

- **A/B Testing**. Compares two button variations to determine the best performer based on clicks or opens. The system can automatically distribute the audience and select the winner.
- **Multivariate Testing**. Suitable for more complex experiments, such as testing multiple elements in an email at once. The platform allows up to 8 template versions.
- **Analytics**. If automatic selection isn’t enough, you can manually analyze reports to choose the best option.

## What Are Bulletproof Buttons?

Bulletproof buttons are created using HTML and CSS instead of images (PNG, GIF, JPEG). Their key advantage is consistent display across all email clients, even if images are disabled.

Using image-based buttons comes with risks—if they don’t load, the CTA becomes invisible, reducing click-through rates. Additionally, editing image-based buttons requires redesigning, re-uploading, and updating the code. With bulletproof buttons, you can easily adjust text and styling directly in the HTML template.

Pixcraft automatically generates bulletproof buttons that display correctly across all email clients, including Outlook, and remain visible even when images are turned off. The block editor allows you to quickly create emails without extra hassle and prepare them for sending. [**Try the email builder for free.**](https://pixcraft.io) 

If you don’t have time for manual email coding, the [**Pixcraft Figma plugin**](https://pixcraft.io/figma) can help. Simply design your layout, and the plugin will convert it into clean HTML code—saving time and eliminating the need for manual adjustments.

## Conclusion

For a CTA to be effective in emails, you need to consider the text, design, and placement. A clear message and a well-designed button in the right spot can significantly impact click-through rates. Instead of guessing, test different variations and analyze the data—this way, your email campaigns will deliver real results.

Let’s explore which buttons drive more clicks, why bulletproof versions matter, and how to test different options to find the best one.


Blog