Typography
Choose fonts that match your brand style and enhance readability. Stick to 1-2 fonts to keep your design clean. Prioritize fast-loading fonts and check accessibility (good contrast, mobile-friendly). Pick styles that suit your audience - elegant serifs for luxury brands, clean sans-serifs for modern shops. Always preview on different devices.
Before adjusting typography settings, consider your brand's mission and identity. Make sure any changes support the visual identity that resonates with your customers.
FAQs
Where can I adjust my typography settings?
Navigate to Theme settings > Typography - Open your theme by clicking Customize.
Click the gear icon (⚙️) in the top-left corner to open Theme Settings.
Scroll down and select Typography.
Modify your font settings (family, size, weight, spacing, etc.) as needed.
Click Save to apply your changes.
Typography settings
Body font
Controls the primary font used for paragraph text and main content throughout your site. This font should be highly readable and will be the most commonly seen typeface on your pages.
Heading font
Determines the font style used for all titles and section headers. Heading fonts often create visual hierarchy and can be more stylized than body text while maintaining readability.
Navigation font
Sets the font style specifically for menu items, navigation links, and other wayfinding elements. This can match your body font or be distinctive to help users identify clickable elements.
Base font size
Establishes the root text size that serves as a reference point for scaling all other text elements on your site. Adjusting this setting affects the overall text size across your theme.
Scale ratio
Controls the proportional size difference between heading levels. A larger ratio creates more dramatic size differences between headings, while a smaller ratio results in more subtle variations.
Text separator
Defines the visual divider (such as a dot or line) used between text elements. These separators help create visual breaks in content and improve readability.
Heading capitalization
Controls the case styling applied to all headings. This setting helps maintain consistency in how your headings appear across your site.
Navigation capitalization
Determines how case is applied to menu text and navigation elements. Consistent capitalization in navigation improves usability and visual coherence.
Button capitalization
Sets the case styling specifically for button text. This helps buttons maintain a consistent appearance throughout your site.
Icon style
Determines the visual style of icons used throughout your theme. Icons play a key role in your theme's visual identity and enhance usability.
Helpful tips
Align with brand identity
Choose fonts that reflect your brand’s personality (e.g., modern, classic, playful).
Prioritize readability
Ensure body text is clear and legible on all devices.
Limit font pairings
Use 1-2 fonts max (e.g., one for headings, one for body text) to maintain consistency.
Consider performance
Opt for system fonts or lightweight web fonts to avoid slowing down your site.
Test accessibility
Ensure sufficient contrast (WCAG standards) and scalable text for all users.
Match customer expectations
Luxury brands may use serifs; minimalist brands often prefer clean sans-serifs.
Preview across devices
Check how fonts render on mobile, tablet, and desktop.
Popular font pairings
These combinations work well together and can provide inspiration for your theme.
Helvetica + Helvetica Black
Futura + Basic Commercial
Muli + ITC Clearface
Monotype Century + Mariposa
Nunito Sans + Optima Nova
Work Sans + Crimson Text
Source Sans Pro + Nunito
Last updated
Was this helpful?