Typography

Elle's typography system uses fluid scaling that automatically adjusts text size across screen sizes.

Accessing Typography Settings

1. Open the theme editor
2. Click Theme settings (gear icon)
3. Click Typography

Font Settings

Heading Font

Used for all headings, titles, and display text:

1. Click the Heading font selector
2. Browse Shopify's font library
3. Select a font family
4. Choose a weight (regular, bold, etc.)

Default: Assistant

Body Font

Used for paragraphs, descriptions, and UI text:

1. Click the Body font selector
2. Choose a readable font
3. Select appropriate weight

Default: Assistant

Base Font Size

Controls the foundation of the type scale:

1. Find the Base size slider
2. Adjust between 14-18 pixels
3. Default is 16px
4. All other sizes scale proportionally

How Font Scaling Works

Elle uses fluid typography that automatically adjusts:

• Mobile: Smaller base size
• Tablet: Medium size
• Desktop: Larger size

This ensures readability across all devices without manual adjustment.

Font Pairing Tips

Complementary Pairs

Good heading + body combinations:

• Serif heading + Sans-serif body (classic editorial)
• Bold sans + Light sans (modern minimal)
• Display font heading + Neutral body (high fashion)

Readability

• Body font should be highly readable at small sizes
• Avoid decorative fonts for body text
• Test your choices with actual product descriptions

Performance

• Each font adds to page load time
• Stick to 1-2 font families when possible
• Elle optimizes font loading automatically

Heading Sizes

Individual sections let you choose heading sizes:

• H1 - Largest, use for main page titles
• H2 - Section headings
• H3 - Subsection headings
• H4 - Smaller headings and labels

The theme automatically styles these with appropriate spacing and weight.