> ## Documentation Index
> Fetch the complete documentation index at: https://vr-it-services-pro.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Choose the base font family and size for the whole site.

# Typography

# Typography

One font family, one base size. Those two controls set the typographic tone of your entire site.

![Screenshot: Customizer → Vara SaaS → Typography showing the font family and stepper control](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/typography-panel.png)

**Admin path:** Appearance → Customize → Vara SaaS → Typography

## The two settings

| Setting | Default | Range / options |
| - | - | - |
| **Base Font-family** | `Roboto, sans-serif` | Six curated stacks |
| **Base font size (px)** | `16` | 12–48 |

### Font family options

| Option | Stack |
| - | - |
| **Roboto** | `Roboto, sans-serif` |
| **Inter** | `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif` |
| **Open Sans** | `'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif` |
| **Helvetica Neue** | `'Helvetica Neue', Helvetica, Arial, sans-serif` |
| **Georgia** | `Georgia, 'Times New Roman', Times, serif` |
| **Monospace** | `'Courier New', Courier, monospace` |

> [!NOTE]
>
> These are a curated allowlist, not a free text field. The field is sanitized on save, so an arbitrary font stack cannot be entered here. If you need a custom font, self-host it and declare it yourself — see [CSS and design tokens](/developers/css-and-design-tokens.md).

## Self-hosted fonts

The theme ships with two fonts bundled locally and made available:

| Font | Family | Use |
| - | - | - |
| **Inter** | Sans-serif | Body copy, UI, anything long-form |
| **JetBrains Mono** | Monospace | Code, terminal output, technical values |

Both are `woff2` only, subset to Latin. Selecting **Inter** from the dropdown uses the bundled file with no external request.

![Screenshot: browser network panel showing self-hosted woff2 font requests](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/typography-network-fonts.png)

> [!TIP]
>
> **If you plan to use a custom typeface, self-host it.** Loading Google Fonts directly adds a third-party connection to every page load, which costs you both speed and a privacy commitment. The bundled Inter is an excellent free substitute for most SaaS sites.

## Base font size

The base size drives the whole scale. Headings, body copy, and metadata are all expressed relative to it, so 16 px produces a balanced result and 18 px produces a more relaxed one.

| Base size | Feels like | Good for |
| - | - | - |
| **14–15 px** | Dense, information-rich | Dashboards, developer documentation |
| **16 px** | Balanced — the default | Most marketing sites |
| **17–18 px** | Generous, editorial | Long-form reading, premium brands |
| **19 px+** | Very large | Landing pages with little text |

The control is a custom **stepper** — type in the field or use the up and down arrows. Values are clamped between 12 and 48.

> [!NOTE]
>
> A base size affects **every** page, including Elementor content, because Elementor inherits the theme's root font size. If you change it, review your Elementor pages afterwards.

## The block editor scale

Separately from the Customizer, `theme.json` gives the block editor a ten-step type scale so blocks look like the rest of the site.

| Token | Intended use |
| - | - |
| `display-lg` | Hero headlines |
| `display-md` | Page titles |
| `heading-lg` | Section headings |
| `heading-md` | Subsection headings |
| `heading-sm` | Card headings |
| `body-lg` | Lead paragraphs |
| `body-md` | Default body copy |
| `body-sm` | Secondary text |
| `caption` | Captions and footnotes |
| `overline` | Eyebrow and label text |

The block editor also offers **Inter** and **JetBrains Mono** as global fonts, and the same nine-color palette as the front end. See [Block editor](/integrations/block-editor.md).

## Typography in the editor

The block editor is styled to match the front end:

**Appearance → Customize → Additional CSS** is not the answer here. Instead, the theme registers an editor stylesheet so the editor canvas uses the same font stack and base size as your site.

![Screenshot: the block editor canvas showing theme-matched typography](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro/images/screenshots/typography-block-editor.png)

## Practical advice

> **One family is enough**
>
> The theme uses your base family for headings and body. A separate heading font is a nice touch but not necessary — and every extra font is another network request.

> **Line length matters more than font choice**
>
> The default container widths keep lines readable. If you widen the container substantially, consider constraining the text column inside your content.

> **Don't go below 16 unless you have a reason**
>
> Smaller base sizes reduce readability, particularly for long-form posts. If your content is dense and technical, keep the site chrome small and the body size comfortable.

## Verify

**1. Check a post**

Visit a single post. Look at body copy, the byline, the table of contents, and the pull of muted metadata text.

**2. Check your Elementor pages**

Elementor inherits the base size. Confirm your headings still have enough contrast in size against your new base.

**3. Check dark mode**

Toggle the theme. Text weight and color change between modes — confirm legibility in both.

**4. Check mobile**

Confirm body copy stays readable at your base size on a narrow screen.

## Related pages

> **[Typography reference](/customization/typography-reference.md)**
>
> Every typography setting and how the scale is built.

> **[Colors](/getting-started/colors.md)**
>
> Set these two together for the strongest result.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.