Typography

The Typography settings let you control the fonts, font sizes, line heights, and letter spacing used across your Vetro theme. You can set separate values for desktop and mobile to keep your store typography consistent and responsive across different screen sizes.

From Theme settings -> Typography

• Heading font: Select the font for the main headings within the header. Choosing an appropriate font helps set the brand's tone and ensures that headings are both prominent and easy to read.

• Body font: Select the font for descriptive text and other secondary components in the header. This font should be clear and highly legible, even at small sizes, to ensure the best possible user experience.

Recommended: Install the Fontify app to easily change any fonts for your whole page or specific elements. Supports all Google fonts that GDPR compliant and uploads custom fonts in seconds.

1. Customize heading typography

Under Headings, you can adjust the size and spacing of your headings.

Vetro provides responsive settings for different heading levels and screen sizes:

• Extra extra large

• Extra large

• Large

• Medium

• Small

• Extra small

• Extra extra small

• H1 size

• H2 size

• H3 size

• H4 size

• H5 size

• H6 size

For each supported size, you can set a separate value for mobile where available.

You can also adjust:

• Line height: Controls the vertical space between lines of text.

• Letter spacing: Controls the horizontal space between characters.

2. Customize body typography

Under Body, you can customize the typography used for general text throughout your store.

You can adjust:

• Base size (mobile): Sets the default body text size on mobile devices.

• Base size (tablet and desktop): Sets the default body text size on tablet and desktop devices.

• Line height: Controls the vertical spacing between lines of body text.

• Letter spacing: Controls the spacing between characters.