Typography

Control the fonts and text styles used throughout your Edpro store.

Accessing Typography Settings

1. Open the theme editor
2. Go to Theme settings (gear icon)
3. Navigate to Design system → Typefaces and heading sections

Font Selection

Choose from Shopify’s library of web fonts:

Available Font Styles

Setting Fonts

1. Click the font picker dropdown
2. Browse or search for fonts
3. Preview in the editor
4. Select your preferred font

Default: Work Sans for all font types

Heading Styles

Configure each heading level (H1-H6) individually:

H1 Settings (Largest Heading)

H2 Settings

H3 Settings

H4-H6 Settings

Similar options with decreasing default sizes:

• H4: 24px default
• H5: 18px default
• H6: 16px default

Subheading Style

Special style for subheadings and labels:

Body Text Styles

Regular Body Text

Small Body Text

Typography Best Practices

Font Pairing

Good combinations:

• Sans-serif headings + Sans-serif body - Clean, modern look
• Serif headings + Sans-serif body - Classic, professional
• Display heading + Clean body - Eye-catching contrast

Readability Tips

1. Body text: 16px minimum for good readability
2. Line height: Use “Normal” or “Loose” for body text
3. Contrast: Ensure text color contrasts with background
4. Mobile: Test font sizes on smaller screens

Hierarchy

Create clear visual hierarchy:

• Make H1 significantly larger than H2
• Use consistent sizing between levels
• Consider using different font weights

Common Tasks

Change heading font

1. Theme settings → Design system → Typefaces
2. Select a font for “Title”

Make headings uppercase

1. Theme settings → Design system → Heading section
2. Set “Text case” to Uppercase

Increase body text size

1. Theme settings → Design system → Body
2. Increase the Size value

Change letter spacing

1. Theme settings → Design system → (select heading)
2. Adjust “Letter spacing” to Tight or Loose

Recommended Font Combinations

Modern & Clean

• Title: Poppins
• Body: Work Sans

Classic & Elegant

• Title: Playfair Display
• Body: Lato

Bold & Contemporary

• Title: Montserrat
• Body: Open Sans

Minimal & Sophisticated

• Title: Josefin Sans
• Body: Roboto

Troubleshooting

Fonts not loading

• Check internet connection
• Clear browser cache
• Ensure fonts are available in Shopify library

Text looks cramped

• Increase line height to “Loose”
• Add more letter spacing
• Increase font size

Headings too similar to body

• Increase heading sizes
• Use a different font family for headings
• Add weight contrast (bold headings)

Next: Configure product cards