Typography

A standard scale and basic definitions for your text: font family,weight and sizes.

Font Family

Global Token	Value
`--fs-text-face-body`	`-apple-system, system-ui, BlinkMacSystemFont, sans-serif`
`--fs-text-face-title`	`var(--fs-text-face-body)`

Weights

Global Token	Value
`--fs-text-weight-light`	`300`
`--fs-text-weight-regular`	`400`
`--fs-text-weight-bold`	`700`
`--fs-text-weight-black`	`900`

Typography Scale

Use a type scale to add rhythm to your typography and ensure consistency throughout the project.

Access https://type-scale.com and pick a scale that suits the store's branding.

Mobile Scale

12
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
14
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
16
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
18
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
20
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
23
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
26
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
29
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
33
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Desktop Scale

12
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
14
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
16
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
20
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
25
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
31
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
39
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
48
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
61
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Global Token	Value
`--fs-text-size-base`	`16px`
`--fs-text-scale-desktop`	`1.25`
`--fs-text-scale-mobile`	`1.13`

`--fs-text-size-0`	`12px`
`--fs-text-size-1`	`14px`
`--fs-text-size-2`	`var(--fs-text-size-base)`
`--fs-text-size-3`	`calc(var(--fs-text-size-2) * var(--fs-scale))`
`--fs-text-size-4`	`calc(var(--fs-text-size-3) * var(--fs-scale))`
`--fs-text-size-5`	`calc(var(--fs-text-size-4) * var(--fs-scale))`
`--fs-text-size-6`	`calc(var(--fs-text-size-5) * var(--fs-scale))`
`--fs-text-size-7`	`calc(var(--fs-text-size-6) * var(--fs-scale))`
`--fs-text-size-8`	`calc(var(--fs-text-size-7) * var(--fs-scale))`

Semantical tokens

Sizes

Global Token	Value
`--fs-text-size-title-huge`	`var(--fs-text-size-7)`
`--fs-text-size-title-page`	`var(--fs-text-size-6)`
`--fs-text-size-title-product`	`var(--fs-text-size-4)`
`--fs-text-size-title-section`	`var(--fs-text-size-4)`
`--fs-text-size-title-subsection`	`var(--fs-text-size-4)`
`--fs-text-size-title-mini`	`var(--fs-text-size-4)`

`--fs-text-size-lead`	`var(--fs-text-size-3)`
`--fs-text-size-menu`	`var(--fs-text-size-base)`
`--fs-text-size-body`	`var(--fs-text-size-base)`
`--fs-text-size-legend`	`var(--fs-text-size-1)`
`--fs-text-size-tiny`	`var(--fs-text-size-0)`

Max Lines

Global Token	Value
`--fs-text-max-lines`	`2`

Adding a custom font

Using a custom font helps to keep a cohesive brand across your store. To maintain readability in your store, choose an easily readable font and the appropriate color and text size. Follow the steps below to add a custom font to your store.

Go to the src folder and create the fonts folder.
Inside the src/fonts folder, create a new WebFonts.tsx file and add a <link> tag for your font-family of choice as in the example below.


_15/* eslint-disable @next/next/no-page-custom-font */
_15
_15function WebFonts() {
_15  return (
_15    <>
_15      {/* Add a <link> tag for your font-family of choice */}
_15      <link
_15        rel="stylesheet"
_15        href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap"
_15      />
_15    </>
_15  );
_15}
_15
_15export default WebFonts;

In your custom theme file, usually src/themes/custom-theme.scss, use the --fs-text-face-body token with the font-family you chose.

We recommend using fallback fonts as system fonts to ensure quick rendering, consistent and readable content.


_10@layer theme {
_10  .theme {
_10    // --------------------------------------------------------
_10    // Typography (Branding Core)
_10    // --------------------------------------------------------
_10      --fs-text-face-body: 'Lato', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
_10  }
_10}

Run yarn dev and check the browser to see the new font-family applied.