Choose fonts and typography

Outcome

You will choose a restrained font system and a readable scale for site pages, Blog posts, and interface text.

Before you start

Open Typography

Go to Settings → Theme → Typography. The screen explains that rem values scale with each visitor’s reading settings while px values lock an exact size.

Choose the font families

• Heading Font applies to titles and H1 through H6.
• Body Font applies to paragraphs, lists, and most reading text.
• Monospace Font applies to code and technical text.

One heading font and one body font is enough for most sites. Use a true monospace face only when code alignment matters.

Set body text first

Under Text Settings, choose Base Font Size, Line Height, and Base Font Weight. Start with Normal and the on-screen 1.5 line-height guidance, then test real paragraphs.

Prefer rem sizing

Use rem unless a precise technical constraint requires px. Text that respects reader scaling is easier to zoom and more resilient across devices.

Build a clear heading scale

Under Font Sizes, check Heading 1 through Heading 6. The visual difference should communicate hierarchy without making narrow headings wrap one word per line.

Check Blog and article sizes

Review Post Title, Post Excerpt, Post Body, Post Heading 2, Post Heading 3, Post Meta Line, Blog Index Title, Blog Index Intro, and Post Card Title separately from site headings.

Check Hero and interface sizes

Review Hero Headline, Hero Subheadline, Buttons, and Navigation Links. Interface text must remain readable without crowding controls.

Use the live examples

Article Example and Interface Example update as settings change. Use them to catch obvious scale issues, then verify the actual public template.

Save and verify

1. Choose Save Changes.
2. Check a page, post, Blog card, menu, button, and code sample.
3. Test desktop and narrow widths.
4. Zoom text and check Light and Dark modes.
5. Confirm headings remain in logical order.

Undo or recover

Use Reset for unsaved changes only after checking scope. Restore recorded values for saved mistakes, then verify every affected content type again.

If text looks wrong

• Check whether a block or template overrides Theme.
• Confirm the intended semantic size is populated.
• Test the fallback font when the selected font does not load.
• Reduce line length before reducing text below a readable size.

Publication gate: an independent reviewer must test font loading, fallbacks, zoom, long words, keyboard controls, desktop, and narrow layouts.