If you have ever created emails for mobile users, you know how hard it is to fit all content within the limited space. But with the help of amp-fit-text, now you can easily achieve that.
This guide will discuss amp-fit-text and ways to use it in your AMP emails.
Table of contents
What is amp-fit-text?
The amp-fit-text is an AMP email component that fits all the content within its parent container by reducing or increasing the font size. Adding more text content to the container will be nicely fitted by reducing the font size.
Applications of amp-fit-text
Here are some ways you can use amp-fit-text in your AMP emails:
1. Avoid colored overflowing content
When users use light mode in their email clients, the backgrounds of their screens will be white. So assume you've made a container with non-white colors like red and placed white text inside. Now, if you keep adding content, the extra content may overflow. This overflow will make it illegible since the text and background colors match. But with amp-fit-text, you can contain it within the container in emails and avoid such a situation.
2. Send comparisons emails
If you have a competing product that your users like, you can send a comparison email where you list the pros of your product over your competitor's. To optimize the reading experience for mobile users, you can use amp-fit-text to shrink or expand font size to fit its parent container. It's also a best practice to incorporate responsive email design in your email campaigns.
Features of amp-fit-text
Below we have discussed the features of amp-fit-text and how you can use them:
✅ Set up the minimum font size
If the amp-fit-text shrinks your text to a very small font size in your emails, it may become impossible to read. To avoid such situations, you need to set up the minimum font size with the min-font-size attribute. This attribute sets the lowest font size that the amp-fit-text can use while shrinking the font size.
✅ Set up the maximum font size
You know that the max-font-size can increase the font size of text content. But what if it increases to an absurd amount? To avoid such situations, you have to use the max-font-size that sets the maximum font size for amp-fit-text to use. The font size can't be increased more than the limit set by max-font-size.
Apart from these two main attributes, the amp-fit-text also includes common attributes. Visit amp.dev for more information.
Wrapping up
The amp-fit-text has a very particular use case but is still helpful when the situation arises. However, other AMP email components like amp-carousel and amp-accordion are more commonly used. So check them out if you want to know what they are and different ways to use them in your AMP emails.
