Theme settings
Typography
Fonts, letter case, and sizes: the settings that give your store its voice.
On this page
Open Theme settingsTypography in the theme editor. These settings apply to the whole store: no section has its own font or text size, so headings and text stay in tune everywhere.
| Setting | Values | What it does |
|---|---|---|
| Heading fontFR: Police des titres | FontDefault: Jost Regular | Names things: page and section titles, product names and campaign lines. Choose the same font as the body for a single-family house. |
| Body fontFR: Police du texte | FontDefault: Jost Regular | Sets everything a shopper reads at length or operates: body copy, prices, buttons, fields and navigation. |
| Heading weightFR: Graisse des titres |
| — |
| Heading caseFR: Casse des titres |
| Capitals are letter-spaced automatically and set slightly smaller, so they occupy the same room. |
| Interface caseFR: Casse de l’interface |
| Applies to buttons, navigation, field labels, badges and other small interface text. Capitals are letter-spaced automatically. |
| Reading sizeFR: Taille de lecture | From 13 to 16pxDefault: 14px | The size body copy is set at. Every commerce size is derived from it. |
| Heading scaleFR: Échelle des titres |
| How large editorial titles grow on wide screens. Commerce text is unaffected. |
Two fonts, two roles
Maison uses at most two typeface families, chosen from Shopify's font library:
- Heading font — it names things: page titles, section titles, hero and statement headlines, and product names on their own page.
- Body font — it makes the store work: body copy, prices, buttons, fields, navigation, and product names in grids.
For a single-family brand (as in the Maison style), choose the same font for both. For editorial contrast (as in the Couture style), choose a serif for headings.
Heading and interface case
- Heading case sets headings (heading font) in capitals.
- Interface case sets small interface text in capitals: buttons, navigation, field labels, badges, drawer titles.
In both cases, letter spacing is adjusted automatically (the theme never uses capitals without spacing), and large headings are set slightly smaller so they take up the same room as in sentence case.
Reading size and heading scale
The theme distinguishes two families of text:
| Family | Examples | Depends on |
|---|---|---|
| Commerce text | Product name on its page (≈ 22px), band headings such as "Related products" (≈ 20px), body copy (14px), names and prices in grids (≈ 13px), buttons and labels (≈ 12px), legal text (≈ 11px) | Reading size |
| Editorial text | Hero and statement headlines, headings in the image with text, newsletter, and journal sections, page titles (collection, cart, article…) | Heading scale and screen width |
The values above match the default reading size (14px). All commerce text scales proportionally when you change it; the smallest sizes never go below 11px.
Editorial headings grow with screen width, from a phone to a large screen. Restrained keeps the steps measured; Expressive makes them about 15 to 25% larger on large screens. The theme's largest heading is capped at 96px whatever the setting.
FAQ
Can I use a custom font?
The picker offers the fonts in Shopify's library (system fonts and licensed Google Fonts). Adding a custom font requires editing the theme code; see Editing code.
Why aren't my headings bold?
That's a theme choice: hierarchy comes from size, position, and space, not weight. Choose Medium in Heading weight for slightly heavier headings.
Maison 1.0.0