The Typography 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 | State |
Font Family | This control selects the font used across the theme. | The control provides font choices for the theme. |
Save | This control saves changes to the theme. | Save is disabled in the captured screen state. |
Sync | This control pushes the current theme build to the storefront. | Sync is available on the screen. |
Type scale slots
Each role groups one or more size slots. Selecting a slot opens its editor, where you set the slot's font size, weight, line height, letter spacing, and units.
Role | Slots |
Display | This role contains the Medium and Small slots. |
Headline | This role contains the Large, Medium, and Small slots. |
Title | This role contains the Large, Medium, and Small slots. |
Label | This role contains the Large slot. |
Body | This role contains the Large, Medium, and Small slots. |
Slot editor controls
Control | What it contains | Unit or state |
Font Size | This control sets the slot's font size. | A unit selector accompanies the value. |
Font Weight | This control sets the slot's font weight. | The control is represented by a slider. |
Line Height | This control sets the slot's line height. | A unit selector accompanies the value. |
Letter Spacing | This control sets the slot's letter spacing. | A unit selector accompanies the value. |
Notes
The live preview shows sample text rendered in the selected font family and type-scale settings, so you can judge the result before saving.
Related