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, 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)

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.

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, 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
Small	14px	14px	Open in Utopia
Medium	16px	16px	Open in Utopia
Large	18px	20px	Open in Utopia
XLarge	20px	28px	Open in Utopia
XXLarge	24px	40px	Open in Utopia
XXXLarge	32px	52px	Open in Utopia

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

• Extra large: Partially fluid - Open in Utopia

---

Creating a custom font scale

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

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.

Step 1: Generate your scale in Utopia

Visit the Utopia 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:

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.