# Typography

<figure><img src="/files/8pRdCc5KCxVzwrAMfm5I" alt=""><figcaption></figcaption></figure>

## Typography

The **Typography** section allows you to create and customize font tokens for consistent text styling across your application.

### Custom Fonts

You can add your own **Custom Fonts** by clicking the **Add New** button.\
Custom fonts can be used alongside the predefined library fonts to match your brand guidelines.

### Library Fonts

The platform comes with a predefined set of **Library Fonts** that follow a standard type scale.\
Each font token includes:

* **Token Name** – The reference name used in your app (e.g., *Heading Large*, *Body Default*).
* **Font Size** – The size of the text in pixels.
* **Font Weight** – The thickness of the font (e.g., *regular*, *medium*, *semiBold*).
* **Font Height** – The line height (e.g., 1.15, 1.25).
* **Font Family** – The typeface used (default is *Inter*).

### Editing Fonts

To edit a font token:

1. Click the **edit icon** (✏️) next to the font you want to change.
2. Adjust font size, weight, height, or family as needed.
3. Changes will be applied wherever that font token is used in your app.

### Why Use Font Tokens?

Font tokens ensure:

* **Consistency** – All text elements follow a unified style.
* **Easy Theme Updates** – Changing a font token updates all components using it.
* **Scalability** – You can maintain a clear typography hierarchy without manually adjusting each element.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/ui-building-blocks/design-system/typography.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.