> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Blum Typography **Theme:** Blum ยท **Section type:** Theme setting Typography sets the fonts and text sizes of your whole store: body text, headings, buttons, subheadings, and menu items. You pick 2 fonts and a base size, and Blum scales every other text size from them, so your pages stay consistent. > **Note:** Blum uses 2 fonts: a body font and a heading font. Buttons, subheadings, and menu items use one of these 2 fonts. ![Subheading badge, heading, body text, and button text in the heading and body fonts](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/ty1_12r8rha.png) **What you can do** - Change the body and heading fonts - Make text bigger or smaller - Style the menu items - See how text sizes are calculated - See what customers see - Look up every setting in "Settings reference" - Fix common problems --- ## Change the body and heading fonts 1. In the theme editor, click **Theme settings** > **Typography**. 2. Under **Body**, click **Change** next to **Font** and select a font. 3. Under **Headings**, click **Change** next to **Font** and select a font. 4. Under **Button**, **Subheading**, and **Menu item**, choose **Body** or **Heading** as the **Font**. 5. Click **Save**. > **Tip:** Some fonts load slower than others. System fonts load fastest because they're already on the customer's device. ## Make text bigger or smaller 1. In the theme editor, click **Theme settings** > **Typography**. 2. Under **Body**, drag **Base text size** from 14 to 20 px. All other text sizes scale from this value. 3. Under **Headings**, set **Text size** to Small, Medium, or Large. 4. Under **Button** and **Menu item**, set **Text size** to Regular or Large. 5. Click **Save**. ## Style the menu items 1. In the theme editor, click **Theme settings** > **Typography**. 2. Under **Menu item**, check **Enable menu item uppercase**. 3. In **Applies uppercase to menu item**, choose which menu levels use capital letters. 4. Set **Font weight**, then choose in **Apply font weight to menu item** which levels use it. 5. Click **Save**. | Setting | What it does | | ---- | ---- | | Applies uppercase to menu item | Shows menu items in capital letters at Level 1 (top-level links), Level 1 & 2, Level 1 & 3, or All levels. Appears after you check Enable menu item uppercase. | | Apply font weight to menu item | Applies Font weight to None, Level 1, Level 2, or Level 1 & 2 of the menu. Works in the mega menu and the menu drawer. | ## See how text sizes are calculated Blum calculates every text size from **Base text size**: - **Buttons and menu items:** Regular is the same as the base size. Large is 1.2 times the base size. - **Subheadings:** 1.2 times the base size. - **Headings:** each heading level is a step bigger than the one below it. The smallest heading (H5) is one step bigger than the base size, and the largest (H1) is five steps bigger. - **Step size:** one step is 1.2 times on most screens, 1.125 times on screens narrower than 459 px, and 1.25 times on screens 1681 px and wider. The heading **Text size** multiplies each step: Small by 1, Medium by 1.05, and Large by 1.1. For example, with a base size of 16 px on a laptop screen: - **Small:** H5 is about 19 px and H1 about 40 px. - **Large:** H5 is about 21 px and H1 about 64 px. ## What customers see - **Body text:** paragraphs, descriptions, prices, and form fields use the body font at the base size. - **Headings:** section headings and product titles use the heading font. They are smaller on phones and larger on wide screens. - **Buttons, subheadings, and menu items:** use the font you chose for them (Body or Heading). - **Menus:** top-level links and the mega menu use your uppercase and font weight choices. ![Mega menu with uppercase top-level menu items](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/ty2_10dyll2.png) ## Settings reference ### Body | Setting | What it does | | ---- | ---- | | Font | The font for body text. | | Base text size | The body text size, from 14 to 20 px. Other text sizes scale from it. | ### Headings | Setting | What it does | | ---- | ---- | | Font | The font for headings. | | Text size | Makes headings Small, Medium, or Large. See "See how text sizes are calculated" above. | ### Button | Setting | What it does | | ---- | ---- | | Font | Uses the Body or Heading font for button text. | | Text size | Regular (the base size) or Large (1.2 times the base size). | ### Subheading | Setting | What it does | | ---- | ---- | | Font | Uses the Body or Heading font for subheadings. | ### Menu item | Setting | What it does | | ---- | ---- | | Font | Uses the Body or Heading font for menu items. | | Text size | Regular (the base size) or Large (1.2 times the base size). | | Enable menu item uppercase | Shows menu items in capital letters. | | Applies uppercase to menu item | Chooses the menu levels in capital letters. See "Style the menu items" above. Appears after you check Enable menu item uppercase. | | Font weight | Sets the weight of the chosen menu levels: Regular, Medium, or Bold. It overrides the weight of the selected font. | | Apply font weight to menu item | Chooses the menu levels that use Font weight. See "Style the menu items" above. | ## Troubleshooting **My headings are too big on desktop.** Set **Headings** > **Text size** to **Small**, or lower **Base text size**. Headings grow with the screen width, so also check the page on a large screen. **Font weight doesn't change my menu.** **Font weight** works only in the mega menu and the menu drawer, and only on the levels in **Apply font weight to menu item**. Check that this isn't set to **None**. **My subheadings don't change size with the Headings setting.** Subheadings scale from **Base text size**, not from the heading **Text size**. **My menu items are all in capital letters.** Uncheck **Enable menu item uppercase**, or choose fewer levels in **Applies uppercase to menu item**. ## Related articles - [Blum Theme settings](https://doc.ecomx.co/en/article/blum-theme-settings-1esrmj4/) - [Blum Theme Styles/Presets](https://doc.ecomx.co/en/article/blum-theme-stylespresets-kst5jz/) - [Blum Header](https://doc.ecomx.co/en/article/blum-header-12ft7y5/)