Typography

Use this guide to set Fit Check typography from the global Theme settings > Typography panel, then apply those presets to headings, text blocks, product-card text, buttons, badges, forms, drawers, and other local surfaces.

Typography works best when you treat the global settings as the system and local block settings as exceptions. Set page colors, font slots, default body text, and H1-H6 presets first. Then choose Default, a heading preset, or Custom inside individual text and heading blocks only when the local surface needs it.

Setup Order

1. Open TypographyIn the theme editor, click Theme settings, open Typography, and set text colors before tuning font sizes.
2. Choose font slotsAssign the Heading, Subheading, Body, Display, and Alternative font slots. These slots become the source fonts for presets and local typography controls.
3. Set default body textTune the Default size, line height, and letter spacing for paragraphs, descriptions, forms, and general interface text.
4. Set H1-H6 presetsUse H1 through H4 for primary page and section hierarchy, then reserve H5 and H6 for compact labels, meta text, and special cases.
5. Apply presets locallySelect a Heading or Text block and choose Default, H1-H6, or Custom from the Style menu depending on the role of that specific text.
6. Preview real pagesReview home, collection, product, search, cart, and mobile layouts after typography changes so hierarchy, wrapping, and contrast remain stable.

Ownership Model

Use global Typography for decisions that should repeat across the store. Use local block Style controls only when one section needs a different text role or visual treatment.

Open Typography

In the theme editor, click the Theme settings gear, then open Typography.

Set color contrast before choosing sizes. If a section has its own background color, review that section after typography changes so page text and headings stay readable.

Choose Font Slots

The Fonts group assigns the reusable source fonts used by Typography presets and local controls.

Set Default Text

The Default group controls the base body treatment.

Default body text should be comfortable in paragraphs, product descriptions, forms, cart text, and compact UI. Avoid forcing uppercase at the global Default level unless the whole brand system expects it.

Set Heading Presets

H1-H6 presets give local blocks a shared visual scale.

Large headings usually need tighter line-height than body text. Use uppercase only when the word length, letter spacing, and mobile wrapping still look deliberate.

Use Alternative Headings

H5 and H6 are alternative heading presets for special use cases.

Use H5 and H6 sparingly. They are most useful when the text is short and scannable. For longer copy, Default body text usually reads better.

Apply Presets To Blocks

After the global presets are set, select a Heading or Text block and use its Style menu.

Use heading presets for hierarchy, not just visual size. A page should usually have one strongest H1-style visual treatment, then H2 and H3 treatments for major groups below it.

Default, Preset, Or Custom

If you repeat the same Custom values in several places, promote that treatment into a global H1-H6 preset instead. That keeps future editing predictable.

Publish Checklist

Shopify Behavior

Shopify’s theme editor lets merchants customize store content and appearance and preview changes in real time. Fit Check exposes Typography through Theme settings, which are organized by settings_schema.json, and local blocks use input settings such as font pickers, ranges, selects, and segmented controls to choose values.

References:

• Shopify theme editor 
• Shopify input settings 
• Shopify settings_schema.json 

Related References

• Typography setting
• Full global settings reference
• Color palette guide
• Product Card guide
• Buttons
• Input fields
• Badges
• Pills