# 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.
* [How to Pick a Font for Your Brand: Guide to Choosing Fonts](https://www.masterclass.com/articles/how-to-pick-a-font)
### Getting started
{% stepper %}
{% step %}
**Align with brand identity**
Choose fonts that reflect your brand’s personality (e.g., modern, classic, playful).
{% endstep %}
{% step %}
**Prioritize readability**
Ensure body text is clear and legible on all devices.
{% endstep %}
{% step %}
**Limit font pairings**
Use 1-2 fonts max (e.g., one for headings, one for body text) to maintain consistency.
{% endstep %}
{% step %}
**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.
{% endstep %}
{% step %}
**Consider performance**
Opt for system fonts or lightweight web fonts to avoid slowing down your site.
{% endstep %}
{% step %}
**Test accessibility**
Ensure sufficient contrast ([WCAG standards](https://www.audioeye.com/lp/wcag-web-compliance/?utm_adgroup=WCAG-Test\&utm_source=google\&utm_medium=paidsearch\&utm_campaign=Generic-WCAG-Testing-Free-Site-Scan-97F\&utm_term=wcag%20test\&utm_content=\&hsa_acc=3628656526\&hsa_cam=20558467141\&hsa_grp=155189112404\&hsa_ad=722995104867\&hsa_src=g\&hsa_tgt=kwd-302642280442\&hsa_kw=wcag%20test\&hsa_mt=b\&hsa_net=adwords\&hsa_ver=3\&gad_source=1\&gad_campaignid=20558467141\&gbraid=0AAAAADkp9oAgY5lRKh-HbY7WjakyD4D85\&gclid=CjwKCAjwuIbBBhBvEiwAsNypvaAlnponeQImSyNHeCo8LU7djysPFF178lEcq1pkApDXR_YytunKmRoCnfMQAvD_BwE)) and scalable text for all users.
{% endstep %}
{% step %}
**Match customer expectations**
Luxury brands may use serifs; minimalist brands often prefer clean sans-serifs.
{% endstep %}
{% step %}
**Preview across devices**
Check how fonts render on mobile, tablet, and desktop.
{% endstep %}
{% endstepper %}
### Font settings
Control the typography appearance throughout your theme.
{% stepper %}
{% step %}
**Font Family**:
* Maximum 2 fonts recommended.
* Body Font: Main content.
* Heading Font: All headings.
* Navigation Font: Buttons/menus.
{% endstep %}
{% step %}
**Sizing**:
* Base Size: Reference point.
* Scale Ratio: Heading proportions.
{% endstep %}
{% endstepper %}
### 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.
{% stepper %}
{% step %}
**Body font**
Primary font for paragraph text and content
{% endstep %}
{% step %}
**Heading font**
Font used for titles and section headers
{% endstep %}
{% step %}
**Navigation font**
Font style for menu items and links
{% endstep %}
{% step %}
**Base font size**
Root text size that scales all other elements
{% endstep %}
{% step %}
**Scale ratio**
Adjusts proportional sizing between heading levels
{% endstep %}
{% step %}
**Text separator**
Visual divider (dot/line) between text elements
{% endstep %}
{% step %}
**Heading capitalization**
Controls case styling for headings
{% endstep %}
{% step %}
**Navigation capitalization**
Controls case styling for menu text
{% endstep %}
{% step %}
**Button capitalization**
Determines case styling for button text
{% endstep %}
{% step %}
**Icon style**
Choose between sharp (modern) or round (friendly) icons
{% endstep %}
{% endstepper %}
### Font Pairings
