---
url: /docs/foundations/typography.md
---
# Typography

Use Typography to create visual hierarchy, making things readable and beautiful. Good typography make it easier for users to scan content to find the information they need.

## Type scale

A type scale is a selection of type styles used across a product to ensure consistency.

We have a predefined type scale (font sizes and line heights) that is used across all themes in Warp. The following example shows an overview of the type scale using the FINN theme. You can find an overview of the type scale for all themes in our [WARP Component library](https://www.figma.com/design/oHBCzDdJxHQ6fmFLYWUltf/WARP---Components?node-id=11099-1148)

## Type scale tokens

Each theme in Warp has its own predefined typeface (see below) and font which are connected to a set of primitive tokens in Warp that capture all of their default properties: Font family, Size, Weight, Line height.

::: image-block
![Overview of different types font styles](/foundations/font-style-scale.png)
:::

### Display

Used for large headings, eg. Hero images.

### Title

Used for page or section headings and titles for content areas.

### Preamble

Follows a heading and provides an introductory statement, a preliminary explanation, or an opening remark that comes before more detailed content.

### Body

Used for the main body of content, or larger paragraphs of text optimised for reading.

### Caption

Use it to caption an image or provide supplementary text.

### Detail

Use it for finer tertiary level detail where information needs to be available but not visually distracting

## Brand fonts

For designers, our fonts are automatically made available for you in Figma, so you shouldn't need to install them on your computer. But if you need them for anything else, they are available for download here:

| Brand    | Link                                                                                                                   |
| -------- | ---------------------------------------------------------------------------------------------------------------------- |
| Bilbasen | [GT Walsheim Pro](https://drive.google.com/file/d/1bOA6RVTfXO5NBs-YRRUPIxr4KCGbh1y9/view?usp=drive_link)                  |
| Blocket  | [Blocket Sans & Blocket Display](https://drive.google.com/drive/folders/1tELjrbHZImwaHGI7uTtLuSYJvLzl-giT?usp=drive_link) |
| DBA      | [Vend Sans Text](https://drive.google.com/file/d/1h_h22cdyZQCFPwHIL9nlM_JySJd1X3G8/view?usp=drive_link)                     |
| FINN     | [FINNType Web Strippet](https://drive.google.com/file/d/1ReyX8Vac6hnXCbsAcV5jLRQ4p8FsPsev/view?usp=drive_link)                      |
| Oikotie  | [Roboto](https://drive.google.com/file/d/1-0_2_ZCPTRvCOy6QCbBafIVvVofMLI0i/view?usp=drive_link)                           |
| Tori     | [Tori Sans Family](https://drive.google.com/file/d/1BkyYUR3sAoNrY2rvDC7hSandXp78_xtD/view?usp=drive_link)                 |
| Vend     | [Vend Sans Text](https://drive.google.com/file/d/1h_h22cdyZQCFPwHIL9nlM_JySJd1X3G8/view?usp=drive_link)                 |

## UX writing guidelines

Astro is the UX writers guide to create effective, localised, and accessible content across all Vend brands and languages. It covers all the nitty-gritty like how to write date and time in different languages, info for development and strings and much more.

**Website**
[Astro Portal](https://zeroheight.com/05b2d7be6/p/3162dd-astro-content-style-guide)

**Slack support**
[#uxwriting](https://sch-chat.slack.com/archives/C05A5JGK269)

![Text spelling "Astro"](/foundations/astro.png)