Typography
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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 () 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.
Control the typography appearance throughout your theme.
Font Family:
Maximum 2 fonts recommended.
Body Font: Main content.
Heading Font: All headings.
Navigation Font: Buttons/menus.
Sizing:
Base Size: Reference point.
Scale Ratio: Heading proportions.
Icons play a key role in your theme’s visual identity, enhancing usability and reinforcing brand style. Choose from multiple design options—such as sharp (modern, precise) or round (friendly, approachable)—to align with your brand’s aesthetic. Consistent icon styling ensures a polished, cohesive experience across your site.
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
These options allow for further customization of your typography.
Body font
Primary font for paragraph text and content
Heading font
Font used for titles and section headers
Navigation font
Font style for menu items and links
Base font size
Root text size that scales all other elements
Scale ratio
Adjusts proportional sizing between heading levels
Text separator
Visual divider (dot/line) between text elements
Heading capitalization
Controls case styling for headings
Navigation capitalization
Controls case styling for menu text
Button capitalization
Determines case styling for button text
Icon style
Choose between sharp (modern) or round (friendly) icons