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.Documentation Index
Fetch the complete documentation index at: https://docs.ecomwize.io/llms.txt
Use this file to discover all available pages before exploring further.
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 | 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 (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 | 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 |
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
From the Size Hierarchy
The size levels follow a strict hierarchy from largest to smallest: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:| Weight | Applied To |
|---|---|
| Heading weight | All heading levels (H1-H6) |
| Body weight | All paragraph levels (P1-P3) |
| Button weight | Button 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.
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 can preview how your text looks on mobile by switching to mobile view in the builder’s top toolbar.