Typography settings define how text appears throughout your store, from headlines to product descriptions to button labels. These settings establish your site’s typographic hierarchy, readability, and overall textual personality.
What these settings control
- Font families for headings and body text
- Font weights and styles
- Text sizes and scaling
- Letter spacing and line height
- Text transform options (uppercase, capitalize)
- Typography pairing and hierarchy
How to access
Open the Theme Customizer
From your Shopify admin, go to Online Store → Themes → Customize.
Navigate to typography settings
In the theme editor sidebar, select Theme settings → Typography.
Choose fonts
Select font families for headings and body text from Shopify’s font library.
Adjust sizing and styling
Configure font weights, sizes, and letter spacing.
Save changes
Click Save to apply typography across your entire store.
Settings
Font Selection
Font Styling
Text Sizing
Text Transform
Heading font: Primary font used for all headings, page titles, and prominent text.
- Serif fonts (Playfair Display, Merriweather): Traditional, elegant, sophisticated. Best for luxury brands.
- Sans-serif fonts (Montserrat, Raleway): Modern, clean, versatile (recommended default). Best for contemporary brands, tech, fashion.
- Display fonts (Bebas Neue, Abril Fatface): Bold, attention-grabbing. Use for headlines only, can be hard to read at smaller sizes.
Safe combinations: Sans-serif headings + Sans-serif body (always works) or Serif headings + Sans-serif body (classic pairing).
- Sans-serif (recommended): Inter, Open Sans, Lato, Roboto. Modern, screen-optimized, excellent readability at all sizes.
- Serif: Lora, Crimson Text. Traditional, editorial feel. Best for content-heavy sites, requires 16px+ for readability.
Avoid decorative or display fonts for body text. Readability trumps uniqueness for paragraphs.
Heading font weight: Controls the thickness/boldness of heading text.
- Regular (400): Subtle, understated. Best for elegant, minimal designs.
- Medium (500): Good middle ground, modern and balanced.
- Semi-bold (600): Recommended for most stores. Clear hierarchy, readable, professional.
- Bold (700): Maximum impact. Best for attention-grabbing headlines.
- Extra Bold (800-900): Ultra-heavy. Use for hero sections only, too intense for all headings.
Match weight to brand personality: Elegant/minimal → Regular-Medium, Bold/confident → Semi-bold-Bold, Loud/energetic → Bold-Extra Bold
Body text should never be Bold (700+). Use bold weights sparingly for emphasis within paragraphs, not as the default.
If using uppercase headings, add letter spacing. If using title case or lowercase, keep normal spacing.
Base font size: Sets the foundation for all text sizing across your store.
- 14px: Compact. More content visible, can strain readability.
- 16px: Standard (recommended default). Proven readability, accessibility standard, works for all audiences.
- 18px: Large. Enhanced readability, good for older demographics, luxury/editorial feel.
Never go below 14px for body text. Smaller sizes fail accessibility standards and harm readability.
- Minor (1.2): Subtle hierarchy. Minimal design, risk of weak visual hierarchy.
- Major (1.25): Moderate hierarchy (recommended default). Clear but not dramatic, professional.
- Perfect Fourth (1.33): Strong hierarchy. Noticeable size differences, works well for content-heavy sites.
- Major Third (1.5): Dramatic hierarchy. Very prominent headings, bold statement design.
Line height: Controls the vertical space between lines of text. For headings: Use 1.1-1.3 for impact and tightness. For body text: Use 1.5-1.6 line height for optimal readability (1.4 is compact but harder to read, 1.7-1.8 is very comfortable but takes more space).Body text: Use 1.5-1.6 line height for optimal readability. Headings: Use 1.1-1.3 for impact and tightness.
Heading text transform: Changes the capitalization of heading text.
- None (recommended default): Natural case as typed. Flexible, works with any content, most readable.
- Uppercase: ALL CAPS HEADINGS. Bold, modern, architectural. Best for short headings (1-3 words), requires increased letter spacing (+0.05em minimum).
- Capitalize: Title Case Headings. Traditional, formal, professional appearance.
- Lowercase: all lowercase headings. Very modern, casual, youthful. Not recommended for most stores (hurts readability).
Button text transform: Controls capitalization of text on buttons throughout your store.
- Uppercase: ALL CAPS BUTTONS (most common and recommended). Clear call-to-action, professional. Add letter spacing (+0.05em) for readability.
- Capitalize: Title Case Buttons. Softer, friendly approach for conversational brands.
- None: Natural case. Casual, modern, works well with sans-serif fonts.
Best practices
- Limit to 2 font families: Use one for headings, one for body text. Each font adds 20-50KB loading time
- Prioritize readability: Body text minimum 14px (16px recommended), line height 1.5-1.6, regular or medium weight, high contrast (4.5:1 minimum)
- Match typography to brand: Serif headings + Sans body for traditional/sophisticated, Sans + Sans for modern/versatile (safest choice), Display + Sans for bold/creative
- Test at multiple sizes: Verify font remains readable from hero headings (48-60px) down to form labels (12-14px)
- Consider mobile readability: Use 16px minimum base font (prevents iOS zoom), avoid ultra-thin weights, increase line height slightly
- Use system fonts for performance: System fonts load instantly but are less distinctive (consider if performance is critical)
- Maintain hierarchy: Use heading levels consistently (H1 for page titles, H2 for sections, etc.) across all pages
- Test for accessibility: Minimum 16px body text, 4.5:1 contrast ratio for body text, 3:1 for large text, avoid all-caps for long text
Changing fonts after launch can dramatically alter your site’s appearance. Test thoroughly before deploying typography changes to production.
Start here: Sans-serif headings (Montserrat, Raleway) + Sans-serif body (Inter, Open Sans) at 16px with Semi-bold headings. This combination works for 90% of stores and you can adjust from there.
- Colors - Ensure text colors have sufficient contrast
- Buttons and Inputs - Button typography settings
- Layout - Page width affects optimal line length for text
