> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Choose heading and body fonts in Facet

> Pick Facet's heading font and body font, see which text on your store uses each one, and check the fixed text sizes used on desktop and phones.

The **Typography** settings choose the two fonts Facet uses across your store, one for headings and one for everything else, and whether headings capitalize each word. This page explains which text uses which font and lists the text sizes the theme blocks offer.

## What these settings control

* The font of every heading and of a few display elements, such as the scrolling marquee.
* The font of body text, buttons, prices, forms and navigation links.
* Whether headings show as you typed them or with each word capitalized.

## How to access

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Open Theme settings**

Click the **Theme settings** icon in the left sidebar.

**3. Open Typography**

Expand **Typography**, then click **Change** under a font to browse the Shopify font library.

![The theme editor with Theme settings open and the Typography group expanded in the sidebar.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/typography/typography-location.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=7a21e94388ae5fad9e57fbd57b96d319)

## Fonts

![Theme editor sidebar showing the Typography theme settings: Typography, Fonts, Heading font, Body font, Heading capitalization.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/typography/typography-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=26038bfb9fa5a7ad987df947ce8340aa)

> [accordion] Heading font
>
> Default: **Playfair Display**, regular.
>
> Used for:
>
> * All headings, including the **Heading** block and page and product titles.
> * Your store name in the header and mobile menu when no logo is uploaded.
> * Links in the mobile menu, and the headings, links and card labels in the mega menu.
> * Footer menu headings.
> * The text in the **Marquee** section, the message a countdown shows once it ends, and author names on testimonials and stories.

> [accordion] Body font
>
> Default: **Manrope**, regular.
>
> Used for everything that is not a heading: paragraphs and the **Text** block, buttons, prices, form fields, the desktop menu links and the cart.
>
> Bold text uses a heavier weight of the same font. Buttons are set in this font in capital letters with a little extra letter spacing.

> [accordion] Heading capitalization
>
> * **As typed** (default): headings show your text exactly as you wrote it.
> * **Capitalize each word**: headings show the first letter of every word as a capital, whatever you type. The demo store uses this option.
>
> This applies to headings such as the **Heading** block, section headings, and page and product titles. Buttons always show in capital letters.

> [!NOTE]
>
> The weight and style you pick in the font picker, for example light or italic, become the weight and style of all text in that font.

## Text sizes

The sizes are fixed by the theme. The **Heading** and **Text** blocks let you pick one per block. On phones (screens narrower than 750 pixels) the larger sizes shrink.

| Size | Desktop | Phone |
| - | - | - |
| Display 1 | 64 pixels | 44 pixels |
| Display 2 | 56 pixels | 40 pixels |
| Heading 1 | 48 pixels | 34 pixels |
| Heading 2 | 36 pixels | 28 pixels |
| Heading 3 | 28 pixels | 24 pixels |
| Heading 4 | 22 pixels | 20 pixels |
| Heading 5 | 18 pixels | 17 pixels |
| Large | 18 pixels | 18 pixels |
| Regular | 16 pixels | 16 pixels |
| Small | 14 pixels | 14 pixels |
| Caption | 12 pixels | 12 pixels |

## Best practices

* **Pair contrast with calm.** A distinctive heading font works best with a plain, readable body font. Body text is set small and read in long lines.
* **Pick a font with several weights.** Facet uses a bolder weight of the body font for bold text. A family with only one weight looks flat.
* **Check long product names.** With **Capitalize each word**, every word in a title starts with a capital, so preview a product page and a collection page with your longest titles.
* **Mind loading speed.** Each font adds files to download. Shopify's system fonts load instantly.

## Related guides

> [card] [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md)
>
> Pick a text size on each Heading and Text block.

> [card] [Buttons](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/buttons.md)
>
> Shape the buttons set in the body font.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.