Configure global typography

Typography is configured in two stages: register available fonts under Design system → Fonts, then assign and size them under Design system → General styles.

Choose a safe font

Safe font is the fallback used when a custom family is unavailable and by settings that explicitly select the safe font. The interface offers system sans-serif, monospace, serif, and Comic Sans stacks.

Choose a fallback with proportions reasonably close to the primary typeface so late font loading does not cause an excessive layout shift.

Add custom families

Under Font Families:

1. add the family name;
2. add only the variants the design uses;
3. upload the corresponding licensed font files;
4. distinguish normal, italic, and required weights correctly;
5. save and check the family in Theme preview.

The font manager generates the family definitions used by the frontend. A missing variant can cause the browser to synthesize a weight or style.

Use a family on a paragraph

The native Paragraph block offers Font and text flow > Font family, with Safe font and the families registered here. The compiled theme utilities include font-family-safe and a name-based class such as font-family-open-sans. The editor uses the same families without loading the complete frontend stylesheet. Reordering families preserves paragraph choices; after renaming or removing a family, select a replacement in affected paragraphs.

The Paragraph Orientation control uses writing-mode-horizontal, writing-mode-vertical-down, or writing-mode-vertical-up. Previously saved writing-mode-vertical content remains compatible with downward flow. See paragraph styling for text-column settings and preview checks.

Assign global typography

In General styles, select:

• Body font and Body font size;
• Headings font and Headings margin bottom;
• Paragraph margin bottom, size, weight, line height, and letter spacing;
• H1–H6 size, viewport-relative size, maximum size, weight, line height, and letter spacing;
• equivalent settings for Display 1–4.

Heading level describes document structure. A Display style changes presentation without changing the required semantic heading level.

Use font-size helpers

POM's fixed font-size utilities use rem units so they respond to the document root size. The supported classes are fs-0375, fs-05, fs-075, fs-1, fs-125, fs-2 and fs-3, corresponding to 0.375, 0.5, 0.75, 1, 1.25, 2 and 3rem. Paragraph, Heading and List controls expose the same set, and the legacy builder can use the classes wherever it accepts a theme helper.

Older pixel-named fs-* classes are retired. Sites upgraded from an earlier version must run the documented font-size helper migration before relying on the new stylesheet alone.

Understand fluid sizes

The base size for H1–H6 and Display 1–4 applies in rem even when viewport width relative font-size is zero. Save your changes and compile CSS to publish the updated sizes.

When a heading's viewport width relative font-size is non-zero, POM combines its base rem value with a vw contribution. The optional max font size is applied on screens at least 1920 px wide.

Test between breakpoints as well as at named device widths; fluid text changes continuously with the viewport.

Verify

Use real headings and paragraphs, including long words and translated text. Check that:

• all intended weights load;
• body text remains readable at zoom;
• line height prevents collisions;
• headings wrap without clipping;
• fallback text is still usable before the custom font loads;
• buttons and navigation still fit with the chosen family.