# Typography

## Typography in use <a href="#typography-in-use" id="typography-in-use"></a>

Our brand font is Overpass and comes in two weights, 400 and 600. We have five “title” variations used for headings and three “body” sizes used for body copy and labels.

<figure><img src="/files/tKOeBKePrRmCnrVMZztK" alt=""><figcaption></figcaption></figure>

## Family in use <a href="#family-in-use" id="family-in-use"></a>

<figure><img src="/files/wwgfHjfJFbRGMBAukSRh" alt=""><figcaption></figcaption></figure>

## Text styles <a href="#text-styles" id="text-styles"></a>

Text styles are used to enhance the information with additional visual attributes that convey meaning such as the font size, line spacing, text alignment, and text colors.

## Vertical Rhythm <a href="#vertical-rhythm" id="vertical-rhythm"></a>

To maintain consistency in the vertical rhythm of the text, we will use 24px separations between the titles and the paragraphs. These separations can also be applied at the top and bottom of the blocks.

<figure><img src="/files/WwAjP0wlEnow69xImnL1" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/WCChWrkJNIKuDntR2uDH" alt=""><figcaption></figcaption></figure>

## Use of the monotype font <a href="#use-of-the-monotype-font" id="use-of-the-monotype-font"></a>

The use of the “Roboto Monotype” typeface is intended exclusively for numerical components such as addresses. The use of these typefaces for the numerical elements is focused on improving the readability experience.

<figure><img src="/files/vH45693uzoDH0Gdk3ljD" alt=""><figcaption></figcaption></figure>

**Badges**\
One of its main uses is for the numerical content on address badges.

<figure><img src="/files/xmXrT2rmCVra9cLxObAx" alt=""><figcaption></figcaption></figure>

## Correct use of typography <a href="#correct-use-of-typography" id="correct-use-of-typography"></a>

It is important to make proper use of typography in terms of thickness, alignment, separation, and layout. Below are some examples of typography Do's and Don'ts.\\

**RESPECT THE HIERARCHY**\
In order to respect the content hierarchy, it is important to make proper use of weights, thus differentiating the titles of the paragraphs.

<figure><img src="/files/gg60n512GakQobfNymrL" alt=""><figcaption></figcaption></figure>

**CORRECT USE OF COLOR**\
The correct use of color will be important when creating our blocks of text. It is essential to never improvise or use random colors, neither in the title, nor in the paragraph.

<figure><img src="/files/fPsEx8hKjaatsPn8jzN0" alt=""><figcaption></figcaption></figure>

The use of color will help us generate a logical hierarchy in our paragraphs. It is important to always be consistent with the use of colors.

<figure><img src="/files/0ktOPpWjWMFqW33bC99O" alt=""><figcaption></figcaption></figure>

**CORRECT USE OF KERNING**\
It is extremely important to respect the kernings and the text lines in order to achieve a balanced layout on our paragraphs.

<figure><img src="/files/tjXc1Xnvmc8qLs8A9JIq" alt=""><figcaption></figcaption></figure>


---

# 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://legacy-docs.aragon.org/developers/tools/aragonds/guidelines/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.