Typography settings let you control how text looks across your store: fonts, sizes, line heights, and letter spacing. Well-set typography improves readability, brand consistency, and the overall shopping experience.
General
Heading font: Choose the font used for headings (H1–H6). This defines the primary visual style of your store.
Body font: Choose the font for body text. Pick something easy to read, especially for longer texts.
Mobile base font size: Base font size on mobile devices. Recommended: 16 px for good readability.
Desktop base font size: Base font size on desktop. Recommended: 18 px or more, depending on your content.
Headings
Line height: Controls the spacing between lines in headings. More space improves clarity.
Letter spacing: Adjusts the space between letters. A small increase can make headings feel cleaner and more balanced.
Enable uppercase: Displays headings in all caps. Useful for a bold or branded look.
Subheadings
Select font: Use either the body font or the heading font.
Letter spacing: Fine-tune the visual rhythm of subheadings.
Enable uppercase: Adds emphasis to subheadings, for example in section titles.
Body text
Line height: One of the most important readability settings. Higher values create a more airy layout.
Letter spacing: Small adjustments can improve comfort when reading longer texts.
Header
Select font: Choose the font for the header area and navigation.
Font size: Adjust the size of items in the header.
Letter spacing: Adjust the letter spacing to make text easy to read.
Enable uppercase: Gives the navigation a modern or distinctive brand style.
Drawers
Select font: Use either the body font or the heading font.
Font size: Ensure text is readable on all screen sizes.
Line height and letter spacing: Improve clarity in compact layouts by adjusting line height and letter spacing.
Enable uppercase: Optional styling to emphasize menu structure.
Tip
Aim for typography that is consistent, clear, and easy to read. Always preview your settings on both mobile and desktop — small tweaks can have a big impact on the shopping experience.
Buttons
Button settings allow you to control the typography, shape, and spacing of buttons across your store. Consistent button styling helps guide users and makes calls to action clear and recognizable.
Select font: Choose which font is used for buttons. You can choose the heading font or body font.
Font size: Adjust the text size inside buttons. The size should be large enough to be easily readable on both desktop and mobile.
Letter spacing: Controls the spacing between letters in button text. Slightly increased spacing can improve clarity, especially for short labels.
Enable uppercase: Displays button text in all capital letters. This can make buttons feel more bold and prominent.
Border radius: Controls how rounded the button corners are. Lower values create sharp corners, while higher values result in fully rounded or pill-shaped buttons.
Button padding: Adjusts the internal spacing of buttons. Larger padding creates bigger, more touch-friendly buttons, while smaller padding gives a more compact look. Choose between Small, Medium, Large and Extra Large.