Skip to main content
Typography is one of the most impactful elements of your landing page design. EcomWize gives you full control over fonts, sizes, weights, and text formatting for both desktop and mobile screens. All typography settings are configured within the Typography tab of the Brand Style modal.

The Typography tab in the Brand Style modal.

​
Font Families

Your brand style uses up to three font families, each serving a different purpose:

​
Heading Font

The heading font is used for all headings (H1 through H6) across your landing page sections. This is typically the most distinctive font in your design — it sets the visual tone for your brand.
  • Choose from 1,500+ Google Fonts or upload a custom font
  • Example: Poppins, sans-serif

​
Body Font

The body font is used for paragraphs, descriptions, labels, and all non-heading text. It should be highly readable at smaller sizes.
  • Choose from Google Fonts or upload a custom font
  • Can be the same as or different from the heading font
  • Example: Poppins, sans-serif

​
Text Highlight Font

The highlight font is a special font used for emphasized text — words or phrases that you wrap in highlight formatting within your sections. It is often a decorative or contrasting font (like a serif or script) that draws attention to key phrases.
  • Only active when text highlighting is enabled in your brand style
  • Typically a serif or handwriting font to contrast with sans-serif heading/body fonts
  • Example: Instrument Serif, serif
A popular combination is using a clean sans-serif for headings and body, paired with an elegant serif for highlights. For example: Poppins for headings, Poppins for body, and Lora for highlights. This creates visual contrast that draws the eye to your most important phrases.

​
Font Weights

Font weights control how thick or thin your text appears. Different weights are configured for different text types: Available weight values depend on the selected font. Common weights include:
  • 100 — Thin
  • 200 — Extra Light
  • 300 — Light
  • 400 — Regular
  • 500 — Medium
  • 600 — Semi-Bold
  • 700 — Bold
  • 800 — Extra Bold
  • 900 — Black
Not all fonts support all weights. The weight dropdown in the Brand Style modal only shows weights that are available for the currently selected font. If you switch fonts, the weight may reset if the new font does not support the previously selected weight.
Some weights also support an italic variant (e.g., “600italic” for semi-bold italic). This is particularly useful for highlight fonts where italic styling adds emphasis.

​
Font Sizes

EcomWize lets you set font sizes separately for desktop and mobile screens. This ensures your text is optimally sized for every device.

​
Heading Sizes (H1 - H6)

Each heading level has independent desktop and mobile sizes:

​
Paragraph Sizes (P1 - P3)

Three paragraph size tiers are available for different text contexts:

​
Button Font Size

Buttons have their own font size setting, independent of paragraph sizes:
When adjusting font sizes, use the desktop/mobile preview toggle in the Brand Style modal to see how your sizes look on each device. A heading that looks great at 40px on desktop may need to be 28-32px on mobile to avoid text wrapping awkwardly.

​
Text Transform

Text transform controls the capitalization of text. Two text transform settings are available:

​
Heading Text Transform

Applies to all headings (H1-H6) across your page:

​
Button Text Transform

Applies to all button labels: Default for both: None
Uppercase text transforms are popular for buttons in bold, energetic brands (fitness, energy drinks). More refined brands typically use “None” or “Capitalize”. Uppercase headings can work for minimal designs but should be used carefully as they reduce readability for longer text.

​
Line Heights

Line height controls the vertical spacing between lines of text. Two line height properties are available: Line heights are expressed as percentages relative to the font size. A 120% line height on a 40px heading means 48px of vertical space per line. A 160% line height on a 16px paragraph means 25.6px per line.
The default values (120% for headings, 160% for body) work well for most brands. Only adjust these if your chosen fonts have unusually tall or compact letterforms that need different spacing.

​
Typography Quick Reference

Here is a summary of all typography properties in the Brand Style: