Documentation
Feedback
Guides
Storefront Development

Storefront Development
Typography

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

A standard scale and basic definitions for your text: font family,weight and sizes.## Font Family
Global TokenValue
--fs-text-face-body-apple-system, system-ui, BlinkMacSystemFont, sans-serif
--fs-text-face-titlevar(--fs-text-face-body)

Weights

Global TokenValue
--fs-text-weight-light300
--fs-text-weight-regular400
--fs-text-weight-bold700
--fs-text-weight-black900

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 TokenValue
--fs-text-size-base16px
--fs-text-scale-desktop1.25
--fs-text-scale-mobile1.13
--fs-text-size-012px
--fs-text-size-114px
--fs-text-size-2var(--fs-text-size-base)
--fs-text-size-3calc(var(--fs-text-size-2) * var(--fs-scale))
--fs-text-size-4calc(var(--fs-text-size-3) * var(--fs-scale))
--fs-text-size-5calc(var(--fs-text-size-4) * var(--fs-scale))
--fs-text-size-6calc(var(--fs-text-size-5) * var(--fs-scale))
--fs-text-size-7calc(var(--fs-text-size-6) * var(--fs-scale))
--fs-text-size-8calc(var(--fs-text-size-7) * var(--fs-scale))

Semantical tokens

Sizes

Global TokenValue
--fs-text-size-title-hugevar(--fs-text-size-7)
--fs-text-size-title-pagevar(--fs-text-size-6)
--fs-text-size-title-productvar(--fs-text-size-4)
--fs-text-size-title-sectionvar(--fs-text-size-4)
--fs-text-size-title-subsectionvar(--fs-text-size-4)
--fs-text-size-title-minivar(--fs-text-size-4)
--fs-text-size-leadvar(--fs-text-size-3)
--fs-text-size-menuvar(--fs-text-size-base)
--fs-text-size-bodyvar(--fs-text-size-base)
--fs-text-size-legendvar(--fs-text-size-1)
--fs-text-size-tinyvar(--fs-text-size-0)

Max Lines

Global TokenValue
--fs-text-max-lines2

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.
  1. Go to the src folder and create the fonts folder.
  2. 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
_15
function 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
_15
export default WebFonts;

  1. 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
}

  1. Run yarn dev and check the browser to see the new font-family applied.
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page