---
icon: text-size
---

# Text

## Font Family

Setting up the site's font family under **Font Family** variables ensures consistent typography throughout the site and makes it easy to update the font family globally without having to change each element individually.



## Font Size

S2 applied **Fluid Type Scale** on some key tags and classes using variables, including:

* <mark style="color:purple;">**`Body`**</mark>, **`text-base`**
* **`text-sm`**, **`text-xs`**, **`text-2xs`**, **`text-3xs`**
* **`text-lg`**, **`text-xl`**, **`text-2xl`**, **`text-3xl`**
* <mark style="color:purple;">**`Heading 1`**</mark> \~ <mark style="color:purple;">**`Heading 6`**</mark>
* **`h1`** \~ **`h6`**

The **variables** for font sizes under **Text** > **Font Size** in the Variables panel:

**`3xs`** ← **`2xs`** ← **`xs`** ← **`sm`** ← **`base`** → **`lg`** → **`xl`** → **`2xl`** → **`3xl`**&#x20;

{% hint style="info" %}
About Fluid Type Scale and fluid values, please refer to this section: [fluid-typography.md](../basic-concepts/fluid-typography.md "mention")
{% endhint %}