Typography

Define a consistent type scale, choose fonts, and control link colors for your whole site.

The Typography panel in Global Settings sets up your site's type system: heading and body size scales, the fonts used for headings and body text, optional custom font styles, and link colors. The values become CSS variables (for example --sp-styble-font-size-heading-1) and shared classes that every Styble block uses.

Type scale

Typography is organized into groups, each with a set of named sizes you can edit individually (font size, line height, letter spacing, word spacing, weight, style, transform and decoration). Each size maps to a CSS variable such as --sp-styble-font-size-heading-1 or --sp-styble-line-height-body-2.

Headings

Six heading sizes ship by default:

Name	Slug	Default font size
Heading 1	heading-1	44 px
Heading 2	heading-2	32 px
Heading 3	heading-3	24 px
Heading 4	heading-4	22 px
Heading 5	heading-5	20 px
Heading 6	heading-6	18 px

Body

Four body sizes ship by default:

Name	Slug	Default font size
Body 1	body-1	18 px
Body 2	body-2	16 px
Body 3	body-3	14 px
Body 4	body-4	12 px

Responsive sizing

Each size can be set per device (desktop / tablet / mobile). The tablet and mobile values are applied within media queries based on your Breakpoints.

Fonts

Each group has a font-family selector:

• Body Font — the default font family for body text.
• Heading Font — the default font family for all headings.

The selector lists your installed System Fonts (from the active theme and WordPress font library) and, when Google Fonts is enabled, a searchable list of Google Fonts. Choose Default to inherit the theme's font. Google fonts selected here are automatically loaded on the front end.

Link colors

Below each group are link color controls with a Normal / Hover toggle:

• Body group: a Link Text Color control with separate Normal and Hover colors for links inside body content.
• Heading group: a Heading Link Color control with separate Normal and Hover colors for links inside headings.

These apply to <a> elements within Styble heading and body text.

Custom font styles

Use the Custom Font Style button at the bottom of the panel to add your own named typography presets beyond the default heading and body sizes. Each custom style gets the same full set of controls (size, line height, spacing, weight, family, etc.) and its own CSS variable, so you can reuse bespoke styles across blocks. Custom styles can be deleted from their controls.

Tips

• Establish your scale and fonts early so blocks inherit consistent text styling.
• Use the heading and body groups for the bulk of your content, and reserve Custom Font Style for special cases (eyebrows, captions, oversized display text).
• Pair your type system with your Colors for an on-brand look.
• See the Global Settings overview for how the panels work together.