Fonts & Typography

Typography begins with shared font families and responsive base sizes, then becomes a semantic hierarchy for headings, paragraphs, labels, navigation, and content-type-specific editorial needs. The goal is readable structure, not a collection of unrelated text sizes.

Inspect font scope and responsive base sizes

Open Site Design → Edit Fonts → Your fonts. Check which choices are Global, whether a content type has an intentional override, and how the Desktop, Tablet, and Mobile base sizes change before adding local text styling.

Choose the correct scope

Global settings are the default for the site. Use a content-type base-size override only when that content family needs a distinct editorial scale; otherwise let it inherit Global so future changes stay coordinated.

Font families

Give each family a clear job. One expressive heading family and one highly readable body/interface family are enough for most sites. Confirm that every required weight loads before using it in the hierarchy.

Desktop, Tablet, and Mobile base sizes

Set Desktop first, then reduce only what becomes oversized or wraps poorly on Tablet and Mobile. Body text should remain comfortably readable; responsive typography is not a uniform percentage shrink.

Build a semantic hierarchy

Use one H1 for the page subject, H2 for major sections, and H3 for control groups or checks. Make visual size and weight support that order without skipping levels simply to achieve a look.

Tune readability as a system

Adjust font size, weight, line height, and letter spacing together. Large headings often need tighter line height; paragraphs need more breathing room. Keep paragraph tracking restrained and ensure links remain distinguishable without color alone.

Control line length and wrapping

Use article width, grid span, or block width to avoid very long desktop lines. On smaller screens, check short and long headings, unbroken labels, buttons, metadata, and navigation so the hierarchy remains clear without clipping.

Accessibility checks

Verify contrast on every effective surface, real zoom behavior, meaningful heading order, readable captions, visible link and focus states, and a comfortable body size. Do not use weight or color as the only signal of importance.

Quick typography recipe

Choose the families and available weights. Set Global Desktop base size. Review Tablet and Mobile. Define H1–H3 and paragraph roles. Test a long article, a card grid, navigation, a form, and a button. Add a content-type override only when those tests demonstrate a real need.

Custom Substyles

Use a custom substyle when one piece of text needs a distinct visual treatment without changing its semantic heading level. For example, an H2 can remain an H2 while appearing larger in one location. The Text toolbar omits arbitrary font-size controls so responsive typography stays coordinated.

Open Site Design → Edit Fonts → Custom Substyles, choose Add Substyle, and define the font, relative size, weight, line height, and letter spacing. In the Text block, select the target text and choose the saved style from Substyle in the toolbar. Test it at Desktop, Tablet, and Mobile.

Next steps

Build the reusable Text Style Presets that use this foundation, then use The Style Panel for rare page-specific exceptions. Finish by reviewing Responsive Design with realistic copy lengths.