# Custom font sizes

### Headings and body

#### Introduction

Primavera provides **six heading level variables** (`--font-heading-h1-size` through `--font-heading-h6-size`) and **five body level variables** (`--font-xs-size`, `--font-s-size`, `--font-body-size`, `--font-l-size`, `--font-xl-size`). 

These CSS variables are referenced throughout the theme – every heading, paragraph, and UI element draws from them.

On top of that, Primavera has a **scaling system** that adjusts all these sizes together. In the *Theme editor > Theme settings > Typography*, the "Font size" setting for headings and body text lets you choose a preset scale (e.g. XSmall through XXXLarge for headings). Changing it doesn't just make one level bigger – it shifts every level proportionally.

The font levels themselves (heading level 1-6, body xs-xl) are built using **fluid typography** powered by [Utopia](https://utopia.fyi/), meaning sizes smoothly interpolate between mobile and desktop viewports with no breakpoints.

**To find the right scale for your project, you can:**

1. **Try the font size presets:** switch between options in the theme editor and see what works
2. **Preview the exact values:** each preset links to a Utopia calculator page (see below) so you can see every size at every viewport width
3. **Create a custom scale:** if none of the presets fit, generate your own values in Utopia and replace the values of the variables (see [Creating a custom font scale](#creating-a-custom-font-scale))

{% hint style="info" %}
You can also override the CSS variables with fixed values directly, but you'll lose the fluid scaling and need to manage responsive sizing yourself via media queries.
{% endhint %}

#### Fluid type scaling

As mentioned above, Primavera uses **fluid typography**: font sizes that smoothly scale between mobile and desktop screen widths, with no breakpoints or jumps. This is powered by [Utopia](https://utopia.fyi/), a popular approach to responsive type.

The core idea is simple: you pick a **base font size** and a **type scale ratio** for both a small screen and a large screen. The ratio determines how much each step up or down differs from the next. A tighter ratio (like 1.125) keeps sizes close together – great for small screens where space is limited. A wider ratio (like 1.2) creates more dramatic contrast between sizes – ideal for large screens where you want bold visual hierarchy.

From those inputs, Utopia calculates every step in your type scale at both screen sizes, then generates CSS `clamp()` values that smoothly interpolate between them as the viewport changes. The result is typography that always feels proportionally "right" for the screen it's on.

**In Primavera, all font scales use these shared settings:**

* **Min viewport:** 320px
* **Max viewport:** 1400px
* **aMin ratio:** 1.125 (Major Second)
* **Max ratio:** 1.2 (Major Third)

The only thing that changes between scale options is the **base font size** at each viewport.

***

#### Heading font sizes

In your Theme editor, under *Theme settings > Typograhy > Headings*, you can choose a global heading "Font size" (from **XSmall** to **XXXLarge**). This adjusts the **overall scale of all heading levels**, everywhere in the theme.

Each option corresponds to a specific Utopia configuration. The "base size" is the starting point of the scale (step 0), headings are calculated upward from there.

**How heading steps map**

Each heading level corresponds to a Utopia step above the base:

| CSS Variable             | Utopia Step | Description      |
| ------------------------ | ----------- | ---------------- |
| `--font-heading-h6-size` | Step 1      | Smallest heading |
| `--font-heading-h5-size` | Step 2      |                  |
| `--font-heading-h4-size` | Step 3      |                  |
| `--font-heading-h3-size` | Step 4      |                  |
| `--font-heading-h2-size` | Step 5      |                  |
| `--font-heading-h1-size` | Step 6      | Largest heading  |

**Heading font size options**

| Font size | Base at 320px | Base at 1400px | Utopia Link                                                                                                                                     |
| --------- | ------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| XSmall    | 12px          | 13px           | [Open in Utopia](https://utopia.fyi/type/calculator/?c=320,12,1.125,1400,13,1.2,6,0,\&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l\&g=s,l,xl,12) |
| Small     | 14px          | 14px           | [Open in Utopia](https://utopia.fyi/type/calculator/?c=320,14,1.125,1400,14,1.2,6,0,\&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l\&g=s,l,xl,12) |
| Medium    | 16px          | 16px           | [Open in Utopia](https://utopia.fyi/type/calculator/?c=320,16,1.125,1400,16,1.2,6,0,\&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l\&g=s,l,xl,12) |
| Large     | 18px          | 20px           | [Open in Utopia](https://utopia.fyi/type/calculator/?c=320,18,1.125,1400,20,1.2,6,0,\&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l\&g=s,l,xl,12) |
| XLarge    | 20px          | 28px           | [Open in Utopia](https://utopia.fyi/type/calculator/?c=320,20,1.125,1400,28,1.2,6,0,\&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l\&g=s,l,xl,12) |
| XXLarge   | 24px          | 40px           | [Open in Utopia](https://utopia.fyi/type/calculator/?c=320,24,1.125,1400,40,1.2,6,0,\&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l\&g=s,l,xl,12) |
| XXXLarge  | 32px          | 52px           | [Open in Utopia](https://utopia.fyi/type/calculator/?c=320,32,1.125,1400,52,1.2,6,0,\&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l\&g=s,l,xl,12) |

> **Note:** When the base size is the same at both viewports (e.g. Small at 14px/14px), the base itself doesn't scale but the headings still do, because the *ratio* changes from 1.125 to 1.2 across viewports. This means heading sizes grow slightly as the screen gets larger, even with a fixed base.

***

#### Body font sizes

In your Theme editor, under *Theme settings > Typograhy > Body*, you can choose a global body "Font size" (from **XSmall** to **Extra large**). This adjusts the **overall scale of all body font levels**, everywhere in the theme.

Specifically, it controls five CSS variables: `--font-xs-size`, `--font-s-size`, `--font-body-size`, `--font-l-size`, and `--font-xl-size`.

**How body steps map**

| CSS Variable       | Utopia Step | Description           |
| ------------------ | ----------- | --------------------- |
| `--font-xs-size`   | Step -2     | Extra small body text |
| `--font-s-size`    | Step -1     | Small body text       |
| `--font-body-size` | Step 0      | Base body text        |
| `--font-l-size`    | Step 1      | Large body text       |
| `--font-xl-size`   | Step 2      | Extra large body text |

**Body font size options**

The smaller presets (Extra small through Medium) use **fixed values** that don't change with viewport width. The larger presets (Large and Extra large) introduce **fluid scaling** on the xs and s steps.

* **Extra small**: Fixed values
* **Small**: Fixed values
* **Medium**: Fixed values
* **Large**: Partially fluid - [Open in Utopia](https://utopia.fyi/type/calculator/?c=320,18,1.125,1400,18,1.2,0,2,\&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l\&g=s,l,xl,12)
* **Extra large**: Partially fluid - [Open in Utopia](https://utopia.fyi/type/calculator/?c=320,20,1.125,1400,20,1.2,0,2,\&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l\&g=s,l,xl,12)

***

#### Creating a custom font scale

If the built-in font sizes don't match your needs, you can create your own using Utopia. 

{% hint style="info" %}
You can also override the CSS variables with fixed values directly, but you'll lose the fluid scaling and need to manage responsive sizing yourself via media queries.
{% endhint %}

**Step 1: Generate your scale in Utopia**

Visit the [Utopia Type Calculator](https://utopia.fyi/type/calculator/) and configure:

1. **Min viewport width:** The smallest screen you're targeting (Primavera uses 320px)
2. **Max viewport width:** The largest screen you're targeting (Primavera uses 1400px)
3. **Min font size:** Your base body text size on small screens
4. **Max font size:** Your base body text size on large screens
5. **Min type scale:** The ratio for small screens (e.g. 1.125 for a subtle scale)
6. **Max type scale:** The ratio for large screens (e.g. 1.2 for more contrast)
7. **Positive steps:** How many sizes above the base you need (6 for headings h6–h1, or 2 for body l/xl)
8. **Negative steps:** How many sizes below the base (2 for body xs/s)

Utopia will generate CSS `clamp()` values for each step.

**Step 2: Add a new option to the font size setting**

To avoid overriding the theme's preset font sizes, let's create a new option value in our typography settings to reference the new scale.

In `config/settings_schema.json`, add a new option value, e.g.  `custom` , to the relevant font size setting. 

For example, if you wanted to add a new font size scale for **headings**, you would adjust the `font_heading_size`  setting:

```
{
  "type": "select",
  "id": "font_heading_size",
  "options": [
    // ... existing options (xsmall through xxxlarge) ...
    {
      "value": "custom",
      "label": "Custom"
    }
  ],
  "default": "medium",
  "label": "Font size",
  "info": "Headings in pop-ups and small containers default to Medium or smaller."
},
```

**Step 3: Map the Utopia output to Primavera's CSS variables**

Now edit `snippets/inline-css.liquid` to add your `custom` setting and assign the new Utopia values to the variables.

For example, to override the **heading** variables:

```
{%- case settings.font_heading_size -%}
  {%- when 'xsmall' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'small' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'medium' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'large' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'xlarge' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'xxlarge' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'xxxlarge' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'custom' -%}
    --font-heading-h6-size: /* Insert step 1 value from Utopia */
    --font-heading-h5-size: /* Insert step 2 value from Utopia */
    --font-heading-h4-size: /* Insert step 3 value from Utopia */
    --font-heading-h3-size: /* Insert step 4 value from Utopia */
    --font-heading-h2-size: /* Insert step 5 value from Utopia */
    --font-heading-h1-size: /* Insert step 6 value from Utopia */
{%- endcase -%}
```

To override the **body** variables:

```
{%- case settings.font_body_size -%}
  {%- when 'xsmall' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'small' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'medium' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'large' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'xlarge' -%}
    {%- comment -%} ... {%- endcomment -%}
  {%- when 'custom' -%}
    --font-xs-size: /* Insert step -2 value from Utopia */
    --font-s-size: /* Insert step -1 value from Utopia */
    --font-body-size: /* Insert step 0 value from Utopia */
    --font-l-size: /* Insert step 1 value from Utopia */
    --font-xl-size: /* Insert step 2 value from Utopia */
{%- endcase -%}
```

**Step 4: That's it**

Primavera references these variables throughout the theme, so all headings, body text, and UI elements will automatically use your custom values. For example:

```css
h6, .h6 {
  font-size: max(0.75rem, var(--font-heading-h6-size));
}
```

The `max()` wrapper ensures a minimum readable size of 0.75rem (12px) regardless of the scale values.

**Tips for choosing good values:**

* **Start with your body size.** Pick a comfortable reading size for mobile (14–18px is typical) and desktop (16–20px).
* **Use a tighter ratio on mobile** (1.067–1.2) to keep the range compact. Use a wider ratio on desktop (1.2–1.333) for more dramatic headings.
* **Preview in Utopia** before committing – the calculator shows a visual preview and table of all computed sizes.
* **Test at both extremes.** Check your chosen scale at 320px and 1400px to make sure nothing looks too cramped or too large.

***

### Subheadings

Subheadings don't have their own font size setting. Instead, `--font-subheading-size` is automatically set to `var(--font-body-size)`, meaning subheadings always match the base body text size. Subheadings inherit the heading font's line height.

To differentiate subheadings from body text, use the other subheading settings available in the theme editor or edit `snippets/inline-css.liquid` to override the value of `--font-subheading-size`.

***

### Buttons

You can choose an overall "Font size" in *Theme settings > Typograhy > Buttons* (Extra small through to Extra large).

The variable that governs button text size is `--font-button-size` , with a different fixed value assigned to each "Font size".

To change the values, you can edit `snippets/inline-css.liquid` . Either override an existing font size value or add a custom value option to the setting (see Step 2 for headings and body font).

***

### Caption

Used for navigation style, pricing, dropdowns, badges, etc.

You can choose an overall "Font size" in *Theme settings > Typograhy > Caption* (Extra small through to Extra large).

Navigation font size controls three related variables: `--font-navigation-size` , `--font-navigation-sm-size`  and `--font-navigation-xs-size` .

To change the values, you can edit `snippets/inline-css.liquid`.

***

### Sidebar menu

Corresponds to the font sizes in the sidebar menu (mobile menu).

You can choose an overall "Font size" in *Theme settings > Typograhy > Sidebar menu* (Extra small through to Extra large).

The variable that governs sidebar menu text size is `--font-sidebar-menu-size` .

To change the values, you can edit `snippets/inline-css.liquid`.

***

### Icons

You can choose an overall "Font size" in *Theme settings > Typograhy > Icons* (Small, Medium or Large).

To change the values, you can edit `snippets/inline-css.liquid`.