The Edit typographies screen sets the font family and type-scale tokens for the current client's storefront theme. Open it from the Typography menu item in Theme Manager.
Fields and controls
Control | What it does |
Font Family | Selects the font used across the theme. The field is a selector. |
Reset | Sits beside Cancel and Save. Unlike Save, it is available as soon as the screen opens. |
Save | Unavailable when the screen first opens. |
Type scale slots
Each role below groups one or more size slots. Each slot has its own editor with Font Size, Font Weight, Line Height and Letter Spacing controls, and a units selector for every control except Font Weight.
Role | Slots |
Display | Medium and Small. |
Headline | Large, Medium and Small. |
Title | Large, Medium and Small. |
Label | Large. |
Body | Large, Medium and Small. |
Slot editor controls
Control | Form |
Font Size | A slider paired with a units selector. |
Font Weight | A slider with no units selector. |
Line Height | A slider paired with a units selector. |
Letter Spacing | A slider paired with a units selector. |
Copy to clipboard | Sits beside the slot's token name, which begins with --font-. |
Notes
The screen includes a preview of sample storefront components, such as buttons, product titles and Add to cart buttons. Theme Manager typography tokens support adaptive typography, so responsive text scales between a defined minimum and maximum value. The preview is expected to reflect this adaptive behavior. Use the preview to judge the result before you save, and use Sync to push the current theme build to the storefront.
Related