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.
| Level | Typical Use | Default Desktop | Default 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 (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.
| Level | Typical Use | Default Desktop | Default Mobile |
|---|
| P1 | Primary body text, descriptions | 18px | 16px |
| P2 | Secondary body text, captions | 16px | 14px |
| P3 | Small text, disclaimers, fine print | 14px | 12px |
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
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.
From the Size Hierarchy
The size levels follow a strict hierarchy from largest to smallest:
H1 > H2 > H3 > H4 > H5 > H6 > P1 > P2 > P3
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 (
font_family_heading) — Applied to H1 through H6
- Body font (
font_family_body) — Applied to P1 through P3
Font Weights
Three weight values control the thickness of text:
| Weight | Applied To |
|---|
weight_heading | All heading levels (H1-H6) |
weight_body_regular | All paragraph levels (P1-P3) |
weight_button | Button text |
Text Transform
Your brand style can apply automatic text transformations:
text_transform_heading — Applied to headings. Options: none, uppercase, lowercase, capitalize.text_transform_button — Applied to button text.
Line Heights
Two line height values control vertical spacing:
line_height_heading — Applied to headings (H1-H6)line_height_body — 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.
