Typography

Typography settings in Slab let merchants control how text looks across the storefront from one place. Use Theme settings > Typography to choose your font families, set readable text scale, and standardize button and heading styles.

How to set up typography

Use this order to keep typography changes predictable in the storefront.

1. Open Theme settings > Typography.

2. In Fonts, choose your four base font families first: Body, Heading, Subheading, and Accent.

3. In Sizes, set Base font size first, then adjust Scale ratio until heading contrast looks right.

4. In Body, set line height for paragraph readability.

5. In Button, choose font, line height, letter spacing, and case for your default call-to-action style.

6. In Heading 1 through Heading 6, set each level to match your brand hierarchy.

7. In Styles, set Icon style and Text separator so icon and text treatments stay consistent.

Suggested setup defaults for most stores

• Keep Base font size between 14 and 16 px for readable storefront text.

• Start Scale ratio around 110% to 120% for clear heading steps.

• Use Normal line height for body and buttons unless your chosen font needs more or less spacing.

• Limit uppercase to selected heading or button levels so customers can scan text quickly.

• Keep one consistent Icon style across the entire storefront.

What each typography setting controls

Fonts

Choose the core font families used across your storefront.

Setting	What it controls	Default
Body	Default paragraph and supporting text font family.	sans-serif
Heading	Default heading font family.	helvetica_n7
Subheading	Default subheading font family.	sans-serif
Accent	Accent font family used where accent typography is applied.	sans-serif

Sizes

These settings control the overall text scale used by Slab.

Setting	What it controls	Range	Default
Base font size	The base type size Slab uses to scale body and heading sizes.	9 to 20 px	14 px
Scale ratio	How quickly type sizes increase between levels.	100% to 135%	110%

Body

Setting	What it controls	Options	Default
Line height	Vertical spacing for body text lines.	None (1), Tight (1.25), Normal (1.625), Loose (2)	Normal (1.625)

Button

Setting	What it controls	Options	Default
Font	Which font family buttons use.	Body, Heading, Subheading, Accent	Body
Line height	Vertical spacing inside button text.	None (1), Tight (1.25), Normal (1.625), Loose (2)	Normal (1.625)
Letter spacing	Tracking for button labels.	Tight (-0.025em), Normal (0), Loose (0.025em)	Normal (0)
Case	Letter case for button labels.	Default, Uppercase, Lowercase	Default

Heading 1 to Heading 6

Each heading level has the same four controls.

Setting	What it controls	Options	Default
Font	Which font family that heading level uses.	Body, Heading, Subheading, Accent	Body
Line height	Vertical spacing for that heading level.	None (1), Tight (1.25), Normal (1.625), Loose (2)	Normal (1.625)
Letter spacing	Tracking for that heading level.	Tight (-0.025em), Normal (0), Loose (0.025em)	Normal (0)
Case	Letter case for that heading level.	Default, Uppercase, Lowercase	Default

Styles

Setting	What it controls	Options	Default
Icon style	The icon family style used by theme icons.	Classic regular, Classic solid, Sharp regular, Sharp solid	Classic regular
Text separator	Separator symbol used between text elements in supported buttons.	Dot (•), Line (`	`)