> ## 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.

# Heading Styles & Sizes

> Understand the heading and paragraph size system in EcomWize Builder and how brand style typography applies globally.

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                  | 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           |

<Note>
  The sizes shown above are defaults. Your actual sizes are determined by your brand style configuration and can be fully customized.
</Note>

## How to Change Text Size

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

### From the Text Toolbar

<Steps>
  <Step title="Select the text block">
    Click on the text you want to resize to select the full block.
  </Step>

  <Step title="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.
  </Step>
</Steps>

### From the Size Hierarchy

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.

## 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.

<Tip>
  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.
</Tip>

## 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.

<Note>
  You can preview how your text looks on mobile by switching to mobile view in the builder's top toolbar.
</Note>