Typography

Radian has two heading fonts and one body font. On top of them sit text styles: Display, Page title, Section heading, Secondary heading, Subheading, Caption, buttons and navigation. Sections pick a style by name, so changing a style here changes every heading that uses it.

How to set it up

Step 1: Choose the fonts

1. Go to Theme settings > Typography.
2. Under Heading fonts, pick the Main heading font (1) and a Secondary heading font, and set the Heading base size.
3. Under Body font, pick the Font and Base size for body text.

Step 2: Set up each text style

1. Open a style such as Display, Page title or Section headings.
2. Turn on Use heading font and choose Main or Secondary, or leave it off to use the body font.
3. Set the Desktop font size scale. Turn on Show advanced settings to set the mobile scale, line height, letter spacing and uppercase.

Step 3: Style buttons and navigation

1. The Primary button and Secondary button styles control button text.
2. Under Navigation, choose the font, size, weight and capitalization of header menu links.

Settings reference

How it works

• Shopify fonts load from Shopify's servers, so no extra setup is needed. Fonts that are not system fonts may add a little to page weight.
• Hidden advanced values keep applying while Show advanced settings is off.

Related

• Colors and color schemes
• Section headings and text