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-medium`	`500`
`--fs-text-weight-semibold`	`600`
`--fs-text-weight-bold`	`700`
`--fs-text-weight-black`	`900`

Typography Scale

FastStore uses a linear scale that adds a fixed step value to each size level — --fs-text-scale-mobile (2px) for mobile and --fs-text-scale-desktop (4px) for desktop. You can use Typescale as inspiration when designing a custom scale for your store.

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.
22
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
24
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
28
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
32
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
36
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.
24
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
28
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
32
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
40
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
48
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
56
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Global Token	Value
`--fs-text-size-base`	`16px`
`--fs-text-scale-desktop`	`4px`
`--fs-text-scale-mobile`	`2px`

`--fs-text-size-0`	`12px`
`--fs-text-size-1`	`14px`
`--fs-text-size-2`	`var(--fs-text-size-base) → 16px`
`--fs-text-size-3`	`calc(var(--fs-text-size-2) + var(--fs-scale)) → 18px / 20px`
`--fs-text-size-4`	`calc(var(--fs-text-size-3) + var(--fs-scale)) → 20px / 24px`
`--fs-text-size-5`	`calc(var(--fs-text-size-4) + var(--fs-scale)) → 22px / 28px`
`--fs-text-size-6`	`calc(var(--fs-text-size-5) + var(--fs-scale)) → 24px / 32px`
`--fs-text-size-7`	`calc(var(--fs-text-size-6) + (var(--fs-scale) * 2)) → 28px / 40px`
`--fs-text-size-8`	`calc(var(--fs-text-size-7) + (var(--fs-scale) * 2)) → 32px / 48px`
`--fs-text-size-9`	`calc(var(--fs-text-size-8) + (var(--fs-scale) * 2)) → 36px / 56px`

Semantic tokens

Sizes

Global Token	Value
`--fs-text-size-title-huge`	`var(--fs-text-size-8)`
`--fs-text-size-title-page`	`var(--fs-text-size-7)`
`--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 a legible font, appropriate colors, and a suitable text size.

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=Inter:wght@400;500;600;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: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
_10  }
_10}

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