Typography
Text plays a significant role on your website. Both the content and the typography you use are crucial for building a strong visual identity that resonates with customers.
Before starting
Typography greatly influences your website's visual identity. Choosing the right font helps customers connect with your brand.
Before adjusting typography settings, consider your brand's mission and identity. Make sure any changes support the visual identity that resonates with your customers.
Getting started
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.
Capitalization
Type settings can be used to further customize which fonts are used throughout your theme. These settings can be used to change capitalization and font families.
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.
Font settings
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.
Icon styles
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.
Advanced settings
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
Font Pairings
Helvetica + Helvetica Black
Inter + Fraunces
Geist + Geist Semi Bold
FAQs
Last updated
Was this helpful?