Achieving Custom Letter Spacing in Customer.io's Drag-and-Drop Email Builder
Problem
A user experienced a challenge when trying to apply a custom letter spacing to text within their email design on the drag-and-drop email builder. They want to set the letter spacing to -0.3, but the default format only allowed whole number values between 0 and -1. The user aimed to find a workaround that would enable them to achieve the desired design.
Solution
To solve this issue, apply font-relative units of measurement such as em and rem as opposed to absolute units like pixels (px).
It's important to note that pixels are an absolute unit, so when you set the font size to 24 pixels, it's going to be 24 pixels. Rems, on the other hand, are relative units that are based on the document's font-size. REM does not translate into px as such, therefore you would need to adjust it accordingly to the font space you would like to achieve.
Here’s a handy guide on how to go about it:
1. Launch the drag-and-drop email builder on Customer.io.
2. Add the HTML Content Block on top of your email.
3. Add the CSS code:
7. Enter your preferred negative value for letter spacing.
8. Preview your email to verify the changes.
Bear in mind that it's crucial to modify the font size and letter spacing values depending on your specific design needs.
Resources
https://customer.io/docs/journeys/drag-and-drop/
https://css-tricks.com/almanac/properties/l/letter-spacing/.