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

# Typography

> Typography is an important aspect of design that greatly influences how users perceive and interact with your content. In this section, we'll explore how to effectively utilize two essential UI elements, "Text" and "Link."

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release34/typography_gen.png)

## Text

The "Text" UI element serves as a tool dedicated solely to presenting text within your user interface. Whether it's paragraphs or descriptions, the "Text" UI element. Through manipulation of embedded CSS properties, you're afforded to edit the visual appearance and formatting of text, aligning it with your design preferences.

### Markdown compatibility

The Text UI element gives you with the flexibility of Markdown formatting. You can enhance your text using various markdown tags, including:

* **Bold**

```markdown theme={"dark"}
**Bold**
```

* *italic*

```markdown theme={"dark"}
*italic*
```

* ***bold italic***

```markdown theme={"dark"}
***bold italic***
```

* strikethrough

```markdown theme={"dark"}
~~strikethrough~~
```

* URL

```markdown theme={"dark"}
[URL](https://url.net)
```

Let's take the following mardkown text example:

```markdown theme={"dark"}
Be among the *first* to receive updates about our **exciting new products** and releases. Subscribe [here](flowx.ai/newsletter) to stay in the loop! Do not ~~miss~~ it!
```

When running the process it will be displayed like this:

![](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/release34/text_markdown.png)

### Text styling

The Styling section provides you with granular control over how your text is displayed, ensuring it aligns with your design vision.

#### Spacing:

Adjust the spacing around your text, setting the margin as follows: 16px 0 0 0 0 0 0 16px.

#### Sizing:

Choose "Fit W" to ensure the text fits the width of its container.

#### Typography

Define the font properties:

* **Font family**: Choose the desired font family.
* **Font weight**: Define the thickness of the font.
* **Font size**: Specify the font size in pixels (px).
* **Height**: Set the line height in pixels (px).
* **Color**: Determine the text color.

#### Align

Determine the text alignment.

## Link

Links are essential for navigation and interaction. The "Link" UI element creates clickable text that directs users to other pages or external resources. Here's how to create a link:


## Related topics

- [UI Designer](/4.6.0/docs/building-blocks/ui-designer/ui-designer.md)
- [Indicators](/4.6.0/docs/building-blocks/ui-designer/ui-component-types/indicators.md)
- [Themes](/4.6.0/docs/flowx-designer/design-assets/themes.md)
- [FlowX.AI 5.1.6 Release Notes (LTS)](/release-notes/v5.x/v5.1.x-lts/v5.1.6-march-2026.md)
- [FlowX.AI 5.8.0 Release Notes](/release-notes/v5.x/v5.8.0-may-2026/v5.8.0-may-2026.md)