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)`

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

Access https://type-scale.com (opens in a new tab) and pick a scale that suits the store's branding.

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))`

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)`

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

Coming Soon.