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.
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
- Includes the font fallback stack (e.g., “Poppins, sans-serif”)
- Default: 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
- Default: 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
- Default: 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:
| Property | Description | Default |
|---|
| Heading weight | Weight for all headings (H1-H6) | 600 (Semi-Bold) |
| Body weight | Weight for paragraphs and body text | Regular (400) |
| Button weight | Weight for button text | 600 (Semi-Bold) |
| Highlight weight | Weight for highlighted text | Regular |
- 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.
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:
| Level | Desktop Default | Mobile Default | Typical Use |
|---|
| H1 | 40px | 32px | Main page headline, hero heading |
| H2 | 32px | 28px | Section headings |
| H3 | 28px | 24px | Sub-section headings |
| H4 | 22px | 20px | Card headings, feature titles |
| H5 | 20px | 18px | Small headings, labels |
| H6 | 18px | 16px | Smallest headings, captions |
Paragraph Sizes (P1 - P3)
Three paragraph size tiers are available for different text contexts:
| Level | Desktop Default | Mobile Default | Typical Use |
|---|
| P1 | 16px | 14px | Primary body text, descriptions |
| P2 | 14px | 12px | Secondary text, captions, metadata |
| P3 | 12px | 10px | Fine print, disclaimers, footnotes |
| Desktop Default | Mobile Default |
|---|
| Button text | 16px | 14px |
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:
| Option | Effect | Example |
|---|
| None | Text appears as typed | ”Welcome to Our Store” |
| Uppercase | All letters capitalized | ”WELCOME TO OUR STORE” |
| Lowercase | All letters lowercased | ”welcome to our store” |
| Capitalize | First letter of each word capitalized | ”Welcome To Our Store” |
Button Text Transform
Applies to all button labels:
| Option | Effect | Example |
|---|
| None | Text appears as typed | ”Add to Cart” |
| Uppercase | All letters capitalized | ”ADD TO CART” |
| Lowercase | All letters lowercased | ”add to cart” |
| Capitalize | First letter of each word capitalized | ”Add To Cart” |
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:
| Property | Default | Description |
|---|
| Heading line height | 120% | Tighter spacing for headings, keeping multi-line headings compact |
| Body line height | 160% | More generous spacing for body text, improving readability |
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:
| Property | Where It Applies | Default Value |
|---|
| Heading font | H1-H6 headings | Poppins, sans-serif |
| Body font | Paragraphs, labels, descriptions | Poppins, sans-serif |
| Highlight font | Highlighted/emphasized text spans | Instrument Serif, serif |
| Heading weight | All headings | 600 |
| Body weight | All body text | Regular |
| Button weight | Button labels | 600 |
| Highlight weight | Highlighted text | Regular |
| H1 size | Desktop / Mobile | 40px / 32px |
| H2 size | Desktop / Mobile | 32px / 28px |
| H3 size | Desktop / Mobile | 28px / 24px |
| H4 size | Desktop / Mobile | 22px / 20px |
| H5 size | Desktop / Mobile | 20px / 18px |
| H6 size | Desktop / Mobile | 18px / 16px |
| P1 size | Desktop / Mobile | 16px / 14px |
| P2 size | Desktop / Mobile | 14px / 12px |
| P3 size | Desktop / Mobile | 12px / 10px |
| Button size | Desktop / Mobile | 16px / 14px |
| Heading transform | H1-H6 capitalization | None |
| Button transform | Button capitalization | None |
| Heading line height | Vertical spacing for headings | 120% |
| Body line height | Vertical spacing for body text | 160% |
