# 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.

{% hint style="info" %}
[How to Pick a Font for Your Brand: Guide to Choosing Fonts](https://www.masterclass.com/articles/how-to-pick-a-font)
{% endhint %}

### FAQs

<details>

<summary>Where can I adjust my typography settings? </summary>

1. **Navigate to Theme settings > Typography** - Open your theme by clicking **Customize**.
2. Click the **gear icon** (⚙️) in the top-left corner to open **Theme Settings**.
3. Scroll down and select **Typography**.
4. Modify your font settings (family, size, weight, spacing, etc.) as needed.
5. Click **Save** to apply your changes.

<figure><img src="https://3532170026-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8sXwSf3sLGWt80kGN8d9%2Fuploads%2FJg0zqvD349Y83Kmox7yy%2Fimage.png?alt=media&#x26;token=2639a9bd-c85c-4ad6-98ff-15db916edec8" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>How can I upload a custom font?</summary>

<https://help.brickspacelab.com/use-a-custom-font#installing-a-custom-font>

</details>

<details>

<summary>How can I change the color of buttons?</summary>

<http://help.brickspacelab.com/developer-guides/advanced-customizations#change-the-color-of-a-button>

</details>

### Typography settings

| Setting                   | Description                                                                                                                                                                                        |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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**

  &#x20;Choose fonts that reflect your brand’s personality (e.g., modern, classic, playful).
* **Prioritize readability**

  &#x20;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](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.
* **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.

1. Helvetica + Helvetica Black
2. Futura + Basic Commercial
3. Muli + ITC Clearface
4. Monotype Century + Mariposa
5. Nunito Sans + Optima Nova
6. Work Sans + Crimson Text
7. Source Sans Pro + Nunito