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.
There are nine text size levels, divided into two groups:
Headings are designed for titles, section headers, and emphasized content. They use the heading font family and heading font weight from your brand style.
Level | Typical Use | Example Desktop | Example Mobile |
H1 | Page title, hero headline | 56px | 36px |
H2 | Section titles | 44px | 30px |
H3 | Subsection headers | 36px | 26px |
H4 | Card titles, feature headers | 28px | 22px |
H5 | Small headings, labels | 22px | 18px |
H6 | Smallest headings, captions | 18px | 16px |
Paragraphs are designed for body text, descriptions, and supporting content. They use the body font family and body font weight from your brand style.
Level | Typical Use | Example Desktop | Example Mobile |
P1 | Primary body text, descriptions | 18px | 16px |
P2 | Secondary body text, captions | 16px | 14px |
P3 | Small text, disclaimers, fine print | 14px | 12px |
There are two ways to change the size level of a text element:
Select the text block
Click on the text you want to resize to select the full block.
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.
The size levels follow a strict hierarchy from largest to smallest:
`` H1 > H2 > H3 > H4 > H5 > H6 > P1 > P2 > P3 ``
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.
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.
Your brand style defines two primary font families:
Heading font - Applied to H1 through H6
Body font - Applied to P1 through P3
Three weight values control the thickness of text:
Weight | Applied To |
Heading weight | All heading levels (H1-H6) |
Body weight | All paragraph levels (P1-P3) |
Button weight | Button text |
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.
Two line height values control vertical spacing:
Heading line height - Applied to headings (H1-H6)
Body line height - Applied to paragraphs (P1-P3)
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.
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.
