Typography
One font family, one base size. Those two controls set the typographic tone of your entire site.
Admin path: Appearance → Customize → Vara SaaS → Typography
The two settings
Font family options
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.
Self-hosted fonts
The theme ships with two fonts bundled locally and made available:
Both are
woff2 only, subset to Latin. Selecting Inter from the dropdown uses the bundled file with no external request.
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.
The control is a custom stepper — type in the field or use the up and down arrows. Values are clamped between 12 and 48.
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.
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.
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.
Practical advice
One family is enough
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
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
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.