> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Element Reference: Text

> Everything you need to know about the mj-text component

The text component (mj-text) is the most commonly used element in any email. It holds all your written content: paragraphs, headlines, lists, links, and formatted text. Here's how to get the most out of it in the Email Love Figma Plugin.

## Adding Text to Your Email

<Steps>
  <Step title="Select a column">
    Select a column in your Figma design.
  </Step>

  <Step title="Open Build Your Own">
    Open the Email Love plugin and go to the **Build Your Own** tab.
  </Step>

  <Step title="Add a text component">
    Click **Text** to add a text component into the selected column.
  </Step>

  <Step title="Edit the content">
    Double-click the text layer in Figma to edit the content.
  </Step>

  <Step title="Style it">
    Style it using Figma's text controls (font, size, color, weight, alignment).
  </Step>
</Steps>

<Warning>
  Text must always be placed inside a column (mj-column). Placing text directly in a section or wrapper will cause export errors.
</Warning>

## Formatting Options

The Email Love plugin supports these text formatting options:

| Formatting     | How to Apply in Figma            | Email Support |
| -------------- | -------------------------------- | ------------- |
| Bold           | Select text, press Cmd/Ctrl+B    | All clients   |
| Italic         | Select text, press Cmd/Ctrl+I    | All clients   |
| Underline      | Select text, press Cmd/Ctrl+U    | All clients   |
| Strikethrough  | Via Figma text options           | Most clients  |
| Font size      | Set in Figma's right panel       | All clients   |
| Font color     | Set in Figma's fill options      | All clients   |
| Text alignment | Left, center, right, justify     | All clients   |
| Line height    | Set in Figma's text options      | All clients   |
| Links          | Add URL in the plugin properties | All clients   |

## Styling Tips

### Font Sizes

Stick to reasonable font sizes for email. Body text should be 14-18px, with headlines typically ranging from 20-36px. See the [Typography](/plugin/styling/typography) guide for detailed recommendations.

### Line Height

Use a line-height ratio of 1.5x to 2x your font size. Tight line heights cause text overlap in email clients, particularly Outlook.

### Text Color

Set text color using Figma's fill property. The plugin converts this to inline CSS color. Dark text on light backgrounds is safest; be aware that dark mode may invert your colors on most clients.

### Links Within Text

To add a hyperlink to text, select the text run you want to link, then add the URL in the Email Love plugin's properties panel. The plugin generates a proper anchor tag in the HTML output. See the [Adding Links to an Email](/plugin/links/add-links) article for the full walkthrough.

## Mobile Overrides

Use the Mobile Styles tab to adjust text properties specifically for mobile devices:

* **Font size:** Bump body text to 16-18px if your desktop size is smaller
* **Alignment:** Center-align text that's left-aligned on desktop, if it reads better on mobile
* **Padding:** Reduce side padding to give text more room on narrow screens

## Common Issues

* **Text looks different in Outlook:** Outlook ignores custom fonts. Set a web-safe fallback in Configure Fonts.
* **Text is getting clipped:** Change your Figma text box from "Fixed Size" to "Auto Height."
* **HTML tags showing as text:** Don't type HTML tags in Figma text layers. Use Figma's formatting tools instead.
* **Weird spacing:** Check your line height and paragraph spacing in Figma. These translate directly to CSS.

*Need help? Reach out at [support@emaillove.com](mailto:support@emaillove.com) or join our Discord community.*