Typography settings
Fonts, sizes, weights, line heights, and colours for every text style - headings, body, buttons, and links - across desktop and mobile.
Typography settings
👤 Ops · 🛠 Dev
The Typography group defines every text style in the theme. Each style is exposed as CSS
variables (see snippets/css-variables.liquid) and consumed across sections, blocks, and snippets.
The property set
Most text styles expose the same set of properties, each a separate setting. Headings and body text
also have a Mobile variant of every property (a second setting with a _mobile in its ID),
applied below the tablet breakpoint.
| Property | Setting suffix | Notes / shared default |
|---|---|---|
| Font family | _family | instrument_sans_n4 (Instrument Sans, weight 400) everywhere. |
| Font size | _size | In px. Defaults differ per style - see tables below. |
| Font weight | _weight | The base CSS font-weight. |
| Font weight - medium | _weight_medium | 500 wherever present. |
| Font weight - bold | _weight_bold | 700 wherever present. |
| Line height | _line_height | Unitless multiplier. |
| Letter spacing | _letter_spacing | Body/button/link only. Default 0 px. |
| Text transform | _text_transform | none | uppercase | lowercase | capitalize. |
| Font style | _font_style | normal | italic. |
| Colour | color_* | Heading and body colours; default per style below. |
Unless a table says otherwise, every style defaults to text transform none, font style
normal, weight-medium 500, and weight-bold 700.
Fonts
| Setting | ID | CSS variable | Default |
|---|---|---|---|
| Headings font family | font_headings_family | --font-headings-family | instrument_sans_n4 |
| Body font family (per size) | font_body_{xl,lg,md,sm,xs}_family | --font-body-{size}-family | instrument_sans_n4 |
| Button font family | font_button_family | --font-button-family | instrument_sans_n4 |
| Link font family | font_link_family | --font-link-family | instrument_sans_n4 |
Headings (H1–H6)
Each level has a desktop and a mobile size (plus weight, line height, transform, style; H1/H3 and all mobile variants also expose medium/bold weights). Colour is shared across breakpoints.
| Level | ID prefix | Desktop size | Mobile size | Weight | Line height | Colour |
|---|---|---|---|---|---|---|
| H1 | font_h1_* / color_h1 | 48px | 32px | 700 | 1.2 | #000000 |
| H2 | font_h2_* / color_h2 | 40px | 28px | 700 | 1.2 | #000000 |
| H3 | font_h3_* / color_h3 | 32px | 24px | 700 | 1.3 | #000000 |
| H4 | font_h4_* / color_h4 | 24px | 20px | 700 | 1.3 | #000000 |
| H5 | font_h5_* / color_h5 | 20px | 18px | 700 | 1.4 | #000000 |
| H6 | font_h6_* / color_h6 | 16px | 14px | 700 | 1.4 | #000000 |
- CSS variables follow the ID:
--font-h1-size,--font-h1-mobile-size,--font-h1-weight,--font-h1-line-height,--color-h1, and so on. - Size ranges: H1 16–96, H2 16–80, H3 16–72, H4 14–64, H5 14–56, H6 12–48 (step 1px).
Body text (XL–XS)
Five body scales, each with desktop and mobile sizes. All share weight 400 (medium 500, bold
700), line height 1.6, letter spacing 0, and colour #333333.
| Scale | ID prefix | Desktop size | Mobile size | CSS variable prefix |
|---|---|---|---|---|
| Extra large | font_body_xl_* / color_body_xl | 20px | 18px | --font-body-xl-* |
| Large | font_body_lg_* / color_body_lg | 18px | 16px | --font-body-lg-* |
| Medium | font_body_md_* / color_body_md | 16px | 16px | --font-body-md-* |
| Small | font_body_sm_* / color_body_sm | 14px | 13px | --font-body-sm-* |
| Extra small | font_body_xs_* / color_body_xs | 12px | 12px | --font-body-xs-* |
Body - Medium is the base body style used most widely (it also has its own mobile font-family
setting, font_body_md_mobile_family). Its variable, --font-body-md-family, is referenced
throughout component CSS.
Button text
| Setting | ID | CSS variable | Default |
|---|---|---|---|
| Font family | font_button_family | --font-button-family | instrument_sans_n4 |
| Font size | font_button_size | --font-button-size | 14px |
| Font weight | font_button_weight | --font-button-weight | 600 |
| Line height | font_button_line_height | --font-button-line-height | 1.5 |
| Letter spacing | font_button_letter_spacing | --font-button-letter-spacing | 0px |
| Text transform | font_button_text_transform | --font-button-text-transform | uppercase |
| Font style | font_button_font_style | --font-button-font-style | normal |
| Colour | color_button | --color-button | #FFFFFF |
Link text
| Setting | ID | CSS variable | Default |
|---|---|---|---|
| Font family | font_link_family | --font-link-family | instrument_sans_n4 |
| Font size | font_link_size | --font-link-size | 16px |
| Font weight | font_link_weight | --font-link-weight | 400 |
| Line height | font_link_line_height | --font-link-line-height | 1.6 |
| Letter spacing | font_link_letter_spacing | --font-link-letter-spacing | 0px |
| Text transform | font_link_text_transform | --font-link-text-transform | none |
| Font style | font_link_font_style | --font-link-font-style | normal |
| Colour | color_link | --color-link | #0066CC |