# Layout, fonts and margins

Choose paper size, typography, margins, and backgrounds to give your document the layout you want.

When editing a template, some changes belong across the whole document, such as a new font or shared margins. Other parts may need their own treatment, like a cover with a colored background followed by white content pages.

Tembuilder lets you do both: set shared defaults in **Global**, then give individual pages their own margins and backgrounds in **Structure**. This guide shows you where to choose paper size and adjust typography, margins, and backgrounds.

## 1. Choose the paper size

Use the paper-size control in the preview area, shown as **A4** below. Paper size applies to the **whole template**; individual pages do not have a separate paper-size setting in Config.

Tembuilder supports 9 paper sizes:

| Paper size | Dimensions (width × height, mm) |
| --- | --- |
| A0 | 841 × 1189 |
| A1 | 594 × 841 |
| A2 | 420 × 594 |
| A3 | 297 × 420 |
| A4 | 210 × 297 |
| A5 | 148 × 210 |
| A6 | 105 × 148 |
| US Letter | 215.9 × 279.4 |
| Legal | 215.9 × 355.6 |

<figure class="doc-sim layout-illustration" aria-label="Preview → choose the paper size">
<div class="sim-stage"><div class="sim-panel"><div class="ls-preview-bar"><div class="sim-tabs"><span>Layout</span><span class="sim-active">PDF</span></div><span class="sim-control sim-focus">A4 <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="ls-paper-sizes"><div><div class="ls-sheet "><b>Tembuilder</b><strong>INVOICE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div><small>A4 · 210 × 297 mm</small></div><div><div class="ls-sheet ls-letter"><b>Tembuilder</b><strong>INVOICE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div><small>US Letter</small></div></div></div></div>
<figcaption>Preview → choose the paper size</figcaption>
</figure>

## 2. Set shared typography in Global

Open **Structure → Global → Config → Typography**.

| Setting | Value and units |
| --- | --- |
| Font size | Size in **pt**, such as `12`. |
| Line height | A multiplier of the font size, such as `1.4`; do not enter `px` or `pt`. |
| Letter spacing | Character spacing in **em**, such as `0.02`. |
| Text align | Left, Center, Right, or Justify. |
| Text color | The shared text color. |

These are default values. If a section sets its own `font-size`, `color`, or `line-height` in CSS, changing that setting in Global does not override the section’s CSS. If part of the content does not respond to a Global change, check that section’s **CSS** tab.

<figure class="doc-sim layout-illustration" aria-label="Global → Config → Typography">
<div class="sim-stage"><div class="ls-path">Structure <span>→</span> Global <span>→</span> Config</div><div class="ls-editor sim-panel"><div class="ls-structure"><div class="sim-panel-title">STRUCTURE</div><div class="sim-tree-row sim-selected">⌄ Global</div><div class="sim-tree-row sim-muted">⌄ Invoice</div><div class="sim-tree-child sim-muted">Billing Parties</div></div><div class="ls-config"><div class="sim-tabs"><span>Props</span><span class="sim-active">Config</span></div><div class="ls-card"><div class="ls-card-title">Typography</div><div class="ls-setting"><span>Font size</span><span class="sim-input sim-focus">12 <small>pt</small></span></div><div class="ls-setting"><span>Line height</span><span class="sim-input">1.4</span></div><div class="ls-setting"><span>Text align</span><span class="sim-input">Left <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="ls-setting"><span>Text color</span><span class="ls-color" aria-label="#111111"></span></div></div></div></div></div>
<figcaption>Global → Config → Typography</figcaption>
</figure>

## 3. Add and order fonts

Open **Global → Config → Fonts → Add font**, search for a Google Font, and add it to the list.

**The list order sets font priority.** Drag a font to the top or use the up/down controls to make it the first choice. Later fonts are fallbacks when an earlier one is unavailable or lacks a character.

A section with its own CSS `font-family` uses that font declaration instead of Global’s default order.

<figure class="doc-sim layout-illustration" aria-label="Global → Config → Fonts → Add font">
<div class="sim-stage"><div class="ls-path">Structure <span>→</span> Global <span>→</span> Config</div><div class="sim-panel"><div class="ls-fonts-head"><strong>Fonts</strong><span class="sim-control sim-focus">＋ Add font</span></div><div class="ls-font-row"><span class="ls-font-index">1</span><div><strong>Space Grotesk</strong><small>Google Fonts</small></div><span class="ls-font-sample">Aa</span></div><div class="ls-font-example">Type sample · Aa Bb Cc · 0123456789</div></div></div>
<figcaption>Global → Config → Fonts → Add font</figcaption>
</figure>

## 4. Set content margins

Open **Global → Config → Content margin**, enable margins, and enter **Top**, **Right**, **Bottom**, and **Left** in **mm**.

For example, A4 is `210 mm` wide. With left and right margins of `14 mm` each, the content area is `182 mm` wide. That is the width available for tables and sections.

Use page margins for the inset from the paper’s edges. Use `padding` and `margin` in a section’s CSS for spacing within or between content blocks.

**Mirror margin** swaps the left and right margins on even sheets for double-sided, bound documents. With Left `24` and Right `12`, odd sheets have a `24 mm` left margin and even sheets have a `24 mm` right margin.

<figure class="doc-sim layout-illustration" aria-label="Margins use mm · Mirror margin swaps left/right on even sheets">
<div class="sim-stage"><div class="ls-path">Global <span>→</span> Config <span>→</span> Content margin</div><div class="ls-margin-scene"><div class="sim-panel ls-margin-panel"><div class="sim-panel-title">Content margin <small>mm</small></div><div class="ls-margin-diagram"><div class="ls-m-top"><small>Top</small><span class="sim-input">14</span></div><div class="ls-m-left"><small>Left</small><span class="sim-input sim-focus">24</span></div><div class="ls-m-page" aria-hidden="true">▤</div><div class="ls-m-right"><small>Right</small><span class="sim-input">12</span></div><div class="ls-m-bottom"><small>Bottom</small><span class="sim-input">20</span></div></div><div class="ls-mirror-row"><span>Mirror margin</span><span class="ls-toggle" aria-label="On"></span></div></div><div class="ls-mirror-pages"><div><span>1</span><div class="ls-margin-paper"><div class="ls-margin-area"><i></i><i></i><i></i></div></div></div><div><span>2</span><div class="ls-margin-paper ls-margin-even"><div class="ls-margin-area"><i></i><i></i><i></i></div></div></div></div></div></div>
<figcaption>Margins use mm · Mirror margin swaps left/right on even sheets</figcaption>
</figure>

## 5. Override a page’s margins and background

Select a page in **Structure → Config** to override Global:

- **Custom margins → Content**: enable a separate content margin for the page.
- **Background → Page background**: enable a separate background color or image.

These settings are independent. A cover can have its own background while keeping shared margins, or a page containing a wide table can have its own margins.

Disable an override to use the **current Global value** again. While an override is enabled, changes to that Global setting do not apply to the page.

Headers and footers have their own margin and background settings when enabled. See [Headers and footers](/docs/editor/header-footer/) or [Using images](/docs/assets/images/) for the relevant details.

<figure class="doc-sim layout-illustration" aria-label="Select a page → Config → enable custom margins or background">
<div class="sim-stage"><div class="ls-path">Structure <span>→</span> Invoice <span>→</span> Config</div><div class="ls-page-scene"><div class="sim-panel ls-page-config"><div class="sim-tabs"><span class="sim-active">Config</span></div><div class="ls-card"><div class="ls-card-title">Custom margins</div><div class="ls-setting"><span>Content</span><span class="ls-toggle"></span></div><div class="ls-setting"><span>Left</span><span class="sim-input">24 <small>mm</small></span></div></div><div class="ls-card"><div class="ls-setting"><strong>Page background</strong><span class="ls-toggle sim-focus"></span></div><div class="ls-setting"><span>Color</span><span class="ls-color ls-color-page"></span></div></div></div><div class="ls-page-comparison"><div><small>Page 1 · Custom</small><div class="ls-sheet ls-custom-paper"><b>Tembuilder</b><strong>INVOICE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div><div><small>Page 2 · Global</small><div class="ls-sheet "><b>Tembuilder</b><strong>INVOICE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div></div></div></div>
<figcaption>Select a page → Config → enable custom margins or background</figcaption>
</figure>

## 6. Structure pages and PDF sheets

A **page in Structure** groups sections; it is not limited to one sheet of paper. Longer content can produce several PDF sheets from that group, and the page’s configuration continues to apply to those sheets.

To give a cover different margins or a background, make it a separate page in Structure. To control where content moves onto the next sheet, use the [page-break settings](/docs/editor/pagination/).

<figure class="doc-sim layout-illustration" aria-label="One Structure page can produce several PDF sheets">
<div class="sim-stage"><div class="sim-panel"><div class="ls-review-bar"><span class="sim-control">Layout</span><span class="sim-control sim-focus">PDF</span><small>A4 · 3 pages</small></div><div class="ls-review-pages"><div><small>Page 1</small><div class="ls-sheet "><b>Tembuilder</b><strong>INVOICE</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div><div><small>Page 2</small><div class="ls-sheet "><b>Tembuilder</b><strong>CONTENT</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div><div><small>Page 3</small><div class="ls-sheet "><b>Tembuilder</b><strong>CONTENT</strong><div class="ls-lines"><i></i><i></i><i></i></div><div class="ls-lines"><i></i><i></i></div><small>01</small></div></div></div><div class="ls-review-footer">1 / 3 <span>‹ &nbsp; ›</span></div></div></div>
<figcaption>One Structure page can produce several PDF sheets</figcaption>
</figure>