Skip to main content
EcomWize Builder uses a structured typography system with nine text size levels. Each level has separate font sizes for desktop and mobile, all configured through your brand style. This ensures consistent, responsive typography across your entire page.

​
The Size System

There are nine text size levels, divided into two groups:

​
Headings (H1 - H6)

Headings are designed for titles, section headers, and emphasized content. They use the heading font family and heading font weight from your brand style.

​
Paragraphs (P1 - P3)

Paragraphs are designed for body text, descriptions, and supporting content. They use the body font family and body font weight from your brand style.
The sizes shown above are defaults. Your actual sizes are determined by your brand style configuration and can be fully customized.

​
How to Change Text Size

There are two ways to change the size level of a text element:

​
From the Text Toolbar

1

Select the text block

Click on the text you want to resize to select the full block.
2

Use the size controls

In the floating toolbar, use the minus (-) button to go smaller, the plus (+) button to go larger, or click the size dropdown (showing the current level like “H2” or “P1”) to pick from all nine options.

​
From the Size Hierarchy

The size levels follow a strict hierarchy from largest to smallest:
Using the plus/minus buttons steps through this hierarchy. At H1 (the largest), the plus button has no effect. At P3 (the smallest), the minus button has no effect.

​
Brand Style Typography

All text sizes are defined in your brand style with separate values for desktop and mobile. This is what makes your pages responsive without any extra work.

​
Font Families

Your brand style defines two primary font families:
  • Heading font — Applied to H1 through H6
  • Body font — Applied to P1 through P3

​
Font Weights

Three weight values control the thickness of text:

​
Text Transform

Your brand style can apply automatic text transformations:
  • Heading text transform — Applied to headings. Options: none, uppercase, lowercase, capitalize.
  • Button text transform — Applied to button text.

​
Line Heights

Two line height values control vertical spacing:
  • Heading line height — Applied to headings (H1-H6)
  • Body line height — Applied to paragraphs (P1-P3)

​
Per-Section Size Overrides

While your brand style sets the global typography, each text element within a section stores its own size level (e.g., “h2” or “p1”). This means you can:
  • Use H1 for your hero headline and H3 for benefit section titles.
  • Mix heading and paragraph sizes within the same section.
  • Override the default size assigned by the section template.
Establish a clear typographic hierarchy in your page. Use H1 sparingly (typically once for the hero), H2 for section titles, H3-H4 for subsections, and P1-P3 for body text.

​
Responsive Behavior

Each size level has independent desktop and mobile values. When a visitor views your page:
  • On screens 640px and wider, desktop sizes are used.
  • On screens below 640px, mobile sizes are used.
You do not need to set mobile sizes manually for individual elements — they are handled automatically through the brand style. To adjust mobile sizes globally, edit the mobile font size values in your brand style settings.
You can preview how your text looks on mobile by switching to mobile view in the builder’s top toolbar.