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.

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.

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.

Settings reference

Body

Headings

Button

Subheading

Menu item

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
• Blum Theme Styles/Presets
• Blum Header

Updated on: 26/10/2026