Typography reference

Every typography setting in Vara SaaS, the type scale behind it, and how to extend it. Admin path: Appearance → Customize → Vara SaaS → Typography

Settings

Setting	Default	Setting key	Control	Range / options
Base Font-family	`Roboto, sans-serif`	`vara_saas_font_family`	Select	Six allowlisted stacks
Base font size (px)	`16`	`vara_saas_base_size`	Custom stepper	12–48

Available font stacks

Label	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`

The font field is sanitized against this allowlist. A value that is not in the list is rejected on save rather than being written through.

Bundled fonts

Two families ship with the theme, subset to Latin in woff2 only.

Font	Family	File	Role
Inter	Sans-serif	`assets/fonts/inter/inter-latin.woff2`	Body copy, UI
JetBrains Mono	Monospace	`assets/fonts/jetbrains-mono/jetbrains-mono-latin.woff2`	Code, technical values

Both are preloaded in the page head, so the browser starts fetching them immediately rather than discovering them in CSS. Screenshot: browser network panel showing woff2 font requests served from your own domain

Screenshot: browser network panel showing woff2 font requests served from your own domain

The base size scale

Your base size is the root. Everything else is relative to it.

Element	Relative size
Body copy	1× your base size
Small text and metadata	~0.875×
Captions	~0.8125×
`h6`	~1.125×
`h5`	~1.25×
`h4`	~1.5×
`h3`	~1.75×
`h2`	~2.125×
`h1`	~2.5×

Changing the base size rescales the whole hierarchy.

A stepper control with increment and decrement arrows sits next to the numeric field. Values outside 12–48 are clamped on save.

The block editor scale

theme.json gives the block editor its own named size scale, independent of your Customizer base size.

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, footnotes
`overline`	Eyebrow and label text

{
  "settings": {
    "typography": {
      "fontSizes": [
        { "slug": "display-lg", "size": "3.5rem" },
        { "slug": "body-md", "size": "1rem" }
      ]
    }
  }
}

Editor styles

The theme calls add_editor_style() so the block editor canvas renders in your chosen typeface and base size rather than WordPress’s defaults. Screenshot: the block editor canvas using the theme's font and base size

Screenshot: the block editor canvas using the theme's font and base size

Adding a custom font

The Customizer only accepts its six stacks. For anything else, self-host it.

Upload the font files

Add your .woff2 to the site. A media upload works, though a .woff2 may be rejected by your host — FTP or a file manager is more reliable.

Declare it with @font-face

In Appearance → Customize → Additional CSS, or better, a child theme.

Apply it

Override the font on body, then on headings if you want a different family there.

/* Appearance → Customize → Additional CSS */

@font-face {
  font-family: "Your Brand Font";
  src: url("/wp-content/uploads/your-brand-font.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Your Brand Font", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Your Brand Font", system-ui, -apple-system, sans-serif;
}

Self-host rather than linking Google Fonts. A <link> to fonts.googleapis.com adds a third-party connection to every page load, costs you render performance, and gives the provider your visitors’ IP addresses. Download the font and serve it yourself.

Use font-display: swap. It tells the browser to show text in a fallback while the webfont loads, rather than blocking on it. The theme’s own bundled fonts do this.

For anything beyond a one-off font, a child theme is the right home for the CSS. See Child themes.

Practical guidance

One family is enough

The theme uses your base family for both headings and body. A separate display font is a refinement, not a requirement.

16px is the safe default

Anything from 15 to 18 works well for marketing content. Below 15 hurts long-form readability.

Line length beats font size

60–80 characters per line is comfortable. The default container widths stay in this range. If you widen the container a lot, constrain the text column.

Test in both modes

Muted text is lightened in dark mode. Confirm your metadata and excerpts remain readable.

Typography

A guided walkthrough of setting your fonts.

CSS and design tokens

Every CSS variable the theme exposes.

Introduction

Getting started

Customization

Typography reference

Typography reference

Settings

Available font stacks

Bundled fonts

The base size scale

The block editor scale

Editor styles

Adding a custom font

Practical guidance

Typography

CSS and design tokens

​Typography reference

​Settings

​Available font stacks

​Bundled fonts

​The base size scale

​The block editor scale

​Editor styles

​Adding a custom font

​Practical guidance

​Related

Typography

CSS and design tokens

Typography reference

Settings

Available font stacks

Bundled fonts

The base size scale

The block editor scale

Editor styles

Adding a custom font

Practical guidance

Related