---
url: /docs/fundamentals/interface/styling/typography.md
description: >-
  Configure text tags, fonts, sizes, weights, spacing, and alignment in Luna
  Park.
---

# Typography

Typography in Luna Park controls how text is displayed in your application: size, weight, font, spacing, alignment...

## HTML Tags

Each text element can be rendered with a different HTML tag depending on its role in the page:

* `div`: generic block (default).
* `p`: standard paragraph.
* `span`: inline text, used to style a specific part of a text.

*Note: Choose the tag according to the content semantics, not its appearance.*

## Typography Properties

Text properties are found in the **Style** tab. They are divided into two categories: **Font** and **Text**.

### Font

These properties control the typographic base of your elements.

| Property | Description |
|------------|--------------|
| **Color** | Defines the text color. |
| **Family** | Chooses the font used (global or custom). |
| **Letter Spacing** | Adjusts the spacing between letters. |
| **Line Height** | Defines the line height. |
| **Size** | Determines the text size. |
| **Style** | Defines the font style (normal, italic, etc.). |
| **Weight** | Controls the text thickness (light, regular, bold, etc.). |

### Text

These properties control the layout and effects applied to the text.

| Property | Description |
|------------|--------------|
| **Align** | Aligns the text (left, center, right, justified). |
| **Decoration** | Applies a decoration (underline, line-through, etc.). |
| **Overflow** | Manages text overflow (clip, ellipsis, etc.). |
| **Shadow** | Adds a drop shadow to the text. |
| **Transform** | Transforms the text (uppercase, capitalize, lowercase). |
| **Wrap** | Defines if the text breaks automatically or stays on a single line. |

## Best Practices

It is recommended to define a consistent system, specifically:

* A regular scale of sizes, preferably using a token with 
* One or two font families maximum.
* Constant rules for weight and spacing.