# Layout, Schriftarten und Ränder

Wählen Sie Papierformat, Typografie, Ränder und Hintergründe, um Ihrem Dokument das gewünschte Layout zu geben.

Beim Bearbeiten einer Vorlage gelten einige Änderungen für das gesamte Dokument, z. B. eine neue Schriftart oder gemeinsame Ränder. Andere Teile benötigen möglicherweise eine eigene Behandlung, z. B. ein Cover mit einem farbigen Hintergrund, gefolgt von weißen Inhaltsseiten.

Mit Tembuilder können Sie beides tun: gemeinsame Standardeinstellungen in **Global** festlegen und dann einzelnen Seiten in **Structure** eigene Ränder und Hintergründe zuweisen. In dieser Anleitung erfahren Sie, wo Sie das Papierformat auswählen und Typografie, Ränder und Hintergründe anpassen können.

## 1. Wählen Sie das Papierformat

Verwenden Sie die Papiergrößensteuerung im Vorschaubereich, unten als **A4** dargestellt. Das Papierformat gilt für die **gesamte Vorlage**; Für einzelne Seiten gibt es in Config keine separate Papierformateinstellung.

Tembuilder unterstützt 9 Papierformate:

| Papierformat | Abmessungen (Breite × Höhe, mm) |
| --- | --- |
| A0 | 841 × 1189 |
| A1 | 594 × 841 |
| A2 | 420 × 594 |
| A3 | 297 × 420 |
| A4 | 210 × 297 |
| A5 | 148 × 210 |
| A6 | 105 × 148 |
| US-Brief | 215.9 × 279.4 |
| Legal | 215.9 × 355.6 |

<figure class="doc-sim layout-illustration" aria-label="Vorschau → Wählen Sie das Papierformat">
<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>RECHNUNG</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>RECHNUNG</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-Brief</small></div></div></div></div>
<figcaption>Vorschau → Wählen Sie das Papierformat</figcaption>
</figure>

## 2. Gemeinsame Typografie in Global festlegen

Öffnen Sie **Structure → Global → Config → Typografie**.

| Einstellung | Wert und Einheiten |
| --- | --- |
| Schriftgröße | Größe in **pt**, z. B. `12`. |
| Linienhöhe | Ein Multiplikator der Schriftgröße, z. B. `1.4`; Geben Sie nicht `px` oder `pt` ein. |
| Buchstabenabstand | Zeichenabstand in **em**, z. B. `0.02`. |
| Text ausrichten | Links, Mitte, Rechts oder Blocksatz. |
| Textfarbe | Die gemeinsame Textfarbe. |

Dies sind Standardwerte. Wenn ein Abschnitt seinen eigenen `font-size`, `color` oder `line-height` in CSS festlegt, überschreibt eine Änderung dieser Einstellung in Global nicht den CSS des Abschnitts. Wenn ein Teil des Inhalts nicht auf eine Global-Änderung reagiert, überprüfen Sie die Registerkarte **CSS** dieses Abschnitts.

<figure class="doc-sim layout-illustration" aria-label="Global → Config → Typografie">
<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">STRUKTUR</div><div class="sim-tree-row sim-selected">⌄ Global</div><div class="sim-tree-row sim-muted">⌄ Rechnung</div><div class="sim-tree-child sim-muted">Rechnungsparteien</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">Typografie</div><div class="ls-setting"><span>Schriftgröße</span><span class="sim-input sim-focus">12 <small>Pkt</small></span></div><div class="ls-setting"><span>Linienhöhe</span><span class="sim-input">1.4</span></div><div class="ls-setting"><span>Text ausrichten</span><span class="sim-input">Links <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>Textfarbe</span><span class="ls-color" aria-label="#111111"></span></div></div></div></div></div>
<figcaption>Global → Config → Typografie</figcaption>
</figure>

## 3. Schriftarten hinzufügen und sortieren

Öffnen Sie **Global → Config → Schriftarten → Schriftart hinzufügen**, suchen Sie nach einer Google-Schriftart und fügen Sie sie der Liste hinzu.

**Die Listenreihenfolge legt die Schriftartenpriorität fest.** Ziehen Sie eine Schriftart nach oben oder verwenden Sie die Auf-/Ab-Steuerelemente, um sie zur ersten Wahl zu machen. Spätere Schriftarten sind Ersatzschriftarten, wenn eine frühere Schriftart nicht verfügbar ist oder ein Zeichen fehlt.

Ein Abschnitt mit seinem eigenen CSS `font-family` verwendet diese Schriftartdeklaration anstelle der Standardreihenfolge von Global.

<figure class="doc-sim layout-illustration" aria-label="Global → Config → Schriftarten → Schriftart hinzufügen">
<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>Schriftarten</strong><span class="sim-control sim-focus">＋ Schriftart hinzufügen</span></div><div class="ls-font-row"><span class="ls-font-index">1</span><div><strong>Weltraumgrotesk</strong><small>Google-Schriftarten</small></div><span class="ls-font-sample">Aa</span></div><div class="ls-font-example">Typbeispiel · Aa Bb Cc · 0123456789</div></div></div>
<figcaption>Global → Config → Schriftarten → Schriftart hinzufügen</figcaption>
</figure>

## 4. Inhaltsränder festlegen

Öffnen Sie **Global → Config → Inhaltsrand**, aktivieren Sie Ränder und geben Sie **Oben**, **Rechts**, **Unten** und **Links** in **mm** ein.

Beispielsweise ist A4 `210 mm` breit. Mit einem linken und rechten Rand von jeweils `14 mm` ist der Inhaltsbereich `182 mm` breit. Das ist die Breite, die für Tabellen und Abschnitte zur Verfügung steht.

Verwenden Sie Seitenränder für den Einschub von den Papierkanten. Verwenden Sie `padding` und `margin` im CSS eines Abschnitts für den Abstand innerhalb oder zwischen Inhaltsblöcken.

**Spiegelrand** vertauscht den linken und rechten Rand auf geraden Blättern für doppelseitige, gebundene Dokumente. Mit Left `24` und Right `12` haben ungerade Blätter einen linken `24 mm`-Rand und gerade Blätter einen rechten `24 mm`-Rand.

<figure class="doc-sim layout-illustration" aria-label="Ränder verwenden mm · Spiegelrand vertauscht links/rechts auf geraden Blättern">
<div class="sim-stage"><div class="ls-path">Global <span>→</span> Config <span>→</span> Inhaltsrand</div><div class="ls-margin-scene"><div class="sim-panel ls-margin-panel"><div class="sim-panel-title">Inhaltsrand <small>mm</small></div><div class="ls-margin-diagram"><div class="ls-m-top"><small>Oben</small><span class="sim-input">14</span></div><div class="ls-m-left"><small>Links</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>Richtig</small><span class="sim-input">12</span></div><div class="ls-m-bottom"><small>Unten</small><span class="sim-input">20</span></div></div><div class="ls-mirror-row"><span>Spiegelrand</span><span class="ls-toggle" aria-label="Ein"></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>Ränder verwenden mm · Spiegelrand vertauscht links/rechts auf geraden Blättern</figcaption>
</figure>

## 5. Überschreiben Sie die Ränder und den Hintergrund einer Seite

Wählen Sie eine Seite in **Structure → Config** aus, um Global zu überschreiben:

- **Benutzerdefinierte Ränder → Inhalt**: Aktivieren Sie einen separaten Inhaltsrand für die Seite.
- **Hintergrund → Seitenhintergrund**: Aktivieren Sie eine separate Hintergrundfarbe oder ein separates Bild.

Diese Einstellungen sind unabhängig. Ein Cover kann einen eigenen Hintergrund haben und dabei gemeinsame Ränder beibehalten, oder eine Seite mit einer breiten Tabelle kann eigene Ränder haben.

Deaktivieren Sie eine Überschreibung, um wieder den **aktuellen Global-Wert** zu verwenden. Während eine Außerkraftsetzung aktiviert ist, gelten Änderungen an dieser Global-Einstellung nicht für die Seite.

Kopf- und Fußzeilen haben bei Aktivierung ihre eigenen Rand- und Hintergrundeinstellungen. Relevante Details finden Sie unter [Kopf- und Fußzeilen](/docs/de/editor/header-footer/) oder [Bilder verwenden](/docs/de/assets/images/)].

<figure class="doc-sim layout-illustration" aria-label="Wählen Sie eine Seite → Config → benutzerdefinierte Ränder oder Hintergrund aktivieren">
<div class="sim-stage"><div class="ls-path">Structure <span>→</span> Rechnung <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">Benutzerdefinierte Ränder</div><div class="ls-setting"><span>Inhalt</span><span class="ls-toggle"></span></div><div class="ls-setting"><span>Links</span><span class="sim-input">24 <small>mm</small></span></div></div><div class="ls-card"><div class="ls-setting"><strong>Seitenhintergrund</strong><span class="ls-toggle sim-focus"></span></div><div class="ls-setting"><span>Farbe</span><span class="ls-color ls-color-page"></span></div></div></div><div class="ls-page-comparison"><div><small>Seite 1 · Benutzerdefiniert</small><div class="ls-sheet ls-custom-paper"><b>Tembuilder</b><strong>RECHNUNG</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>Seite 2 · Global</small><div class="ls-sheet "><b>Tembuilder</b><strong>RECHNUNG</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>Wählen Sie eine Seite → Config → benutzerdefinierte Ränder oder Hintergrund aktivieren</figcaption>
</figure>

## 6. Structure-Seiten und PDF-Blätter

Eine **Seite in Structure** gruppiert Abschnitte; es ist nicht auf ein Blatt Papier beschränkt. Längere Inhalte können mehrere PDF-Blätter aus dieser Gruppe erzeugen, und die Konfiguration der Seite gilt weiterhin für diese Blätter.

Um einem Cover unterschiedliche Ränder oder einen Hintergrund zu geben, machen Sie es in Structure zu einer separaten Seite. Um zu steuern, wohin der Inhalt auf das nächste Blatt verschoben wird, verwenden Sie die [Seitenumbrucheinstellungen](/docs/de/editor/pagination/).

<figure class="doc-sim layout-illustration" aria-label="Eine Structure-Seite kann mehrere PDF-Blätter erzeugen">
<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 Seiten</small></div><div class="ls-review-pages"><div><small>Seite 1</small><div class="ls-sheet "><b>Tembuilder</b><strong>RECHNUNG</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>Seite 2</small><div class="ls-sheet "><b>Tembuilder</b><strong>INHALT</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>Seite 3</small><div class="ls-sheet "><b>Tembuilder</b><strong>INHALT</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>‹   ›</span></div></div></div>
<figcaption>Eine Structure-Seite kann mehrere PDF-Blätter erzeugen</figcaption>
</figure>