Textgestaltung

Passe den Text deiner Website mit einer Vielzahl von Einstellungen an.

Zuletzt aktualisiert: 20. Dezember 2024

Du kannst die Schriftart, Farbe, Größe, Abstände und weitere Elemente eines Textes unter Website-Stile gestalten. Das Gestalten steuert die Typografie (Schriftdesign) und verleiht den Wörtern Persönlichkeit und Flair. Die meisten Stil-Änderungen gelten für diesen Texttyp auf der gesamten Website.

In dieser Anleitung werden die verschiedenen Möglichkeiten zur Gestaltung des Textes deiner Website erläutert.

Tipp

Weitere Informationen zum Formatieren von Text, darunter das Festlegen des Texttyps, Erstellen von Listen sowie Fett- und Kursivformatierung, findest du unter Text formatieren.

Video ansehen

Text gestalten

Die Art und Weise, wie du den Text Ihrer Website formatierst, hängt von der Version deiner Website ab.

Um deinen Text zu gestalten, verwende die Menüs „Schriftarten“ und „Farben“ unter Website-Stile, um Schriftarten und Farben für die gesamte Website festzulegen oder Schriftarten und Farben in bestimmten Abschnitten anzupassen.

Weitere Informationen finden Sie unter Schriftarten ändern und Farben ändern.

Um deinen Text zu gestalten, wähle unter Website-Stile die Schriftarten und Farben deines Textes aus. Um ein einheitliches Erscheinungsbild zu schaffen, gelten die Anpassungen unter Website-Stile für alle Texte mit einem bestimmten Format.

So kannst du beispielsweise die Schriftart aller Überschriften auf einmal oder den gesamten Textkörper auf einmal ändern. Jedes Template hat leicht unterschiedliche Textgestaltungsoptionen. Mehr darüber, wie das funktioniert, erfahren Sie unter Schriftarten ändern.

Verwende die folgenden Abschnitte, um die spezifischen Schritte für jede Stil-Option zu sehen.

Farbe

Die Art und Weise, wie du die Textstärke änderst, hängt von der Version deiner Website ab.

Unter Website-Stile kannst du die Farbe einer ganzen Textgruppe ändern, wie Absatz (klein) oder Überschriften-Links. So änderst du die Farbe einer Textgruppe:

  1. Öffne Website-Stile und klicke dann auf Farben.
  2. Klicken Sie auf das Farbschema für den Abschnitt, den du bearbeiten möchtest.
  3. Klicke auf die Farbanpassung, die der Textgruppe, die du bearbeiten möchtest, entspricht und wähle dann eine neue Farbe aus.

Genauere Anweisungen dazu findest du unter Farben ändern.

Farbe des Text-Blocks

In einem Text-Block kannst du die Farbe des ausgewählten Texts ändern. Ändere die Farben einzelner Wörter, damit sie auffallen, oder ändere jeden Buchstaben in eine andere Farbe. So legst du benutzerdefinierte Textfarben fest:

  1. Klicke auf der Seite oder dem Element mit dem Text-Block auf Bearbeiten und klicke dann in den Text-Block.
  2. Markiere den Text, den du ändern möchtest. Dies kann ein einzelner Buchstabe, ein einzelnes Wort oder mehrere Wörter sein.
  3. Klicke in der Text-Werkzeugleiste auf das Farbsymbol und wähle dann eine neue Farbe aus. Klicke auf Palette, um eine Farbe aus der Farbpalette für die gesamte Website auszuwählen, oder klicke auf Benutzerdefiniert, um die Farbauswahl zu verwenden.
  4. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.
RTE_click_color_circle.png

Nicht vergessen:

  • Das Ändern der Textfarben in der Text-Block-Werkzeugleiste überschreibt alle unter Website-Stile festgelegten Textfarben. Wenn du nach dem Ändern der Textfarben in der Text-Block-Werkzeugleiste die Farbe derselben Textgruppe unter „Website-Stile“ änderst, bleiben die in der Text-Block-Werkzeugleiste vorgenommenen Farbänderungen erhalten.
  • Das Ändern des Farbschemas eines Abschnitts überschreibt alle Textfarben und setzt den Text so zurück, dass er den Farbeinstellungen für dieses Design entspricht. Um benutzerdefinierte Textfarben im Text-Block wiederherzustellen, musst du sie manuell erneut anwenden. 
  • Wenn du das Farbschema eines Abschnitts änderst und dann zum vorherigen Farbschema zurückkehrst, werden benutzerdefinierte Textfarben nicht beibehalten. Du musst sie manuell erneut anwenden.
  • Das Farbsymbol wird nur in Text-Blöcken und nicht in anderen Text-Werkzeugleisten angezeigt.

Wähle unter Website-Stile die Farbanpassung aus, die dem Text, den du bearbeiten möchtest, entspricht. Genauere Anweisungen dazu findest du unter Farben ändern.

Schriftart

Klicke unter „Website-Stile“ auf die Textgruppe, die du bearbeiten möchtest, und wähle eine neue Schriftart aus. Detaillierte Anweisungen findest du unter Schriftarten ändern.

Zeichenabstand

Die Art und Weise, wie Sie den Buchstabenabstand ändern, hängt von der Version Ihrer Website ab.

So ändern Sie den Buchstabenabstand:

  1. Klicke beim Bearbeiten einer Seite auf das Pinselsymbol und dann auf Schriftarten.
  2. Klicke unter Globale Schriftartstile auf den Texttyp, den du bearbeiten möchtest: Überschriften, Absätze, Buttons oder Verschiedenes.
  3. Verwenden Sie den Schieberegler Buchstabenabstand, um den Abstand anzupassen, oder geben Sie einen neuen em-Wert ein.
  4. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Klicke unter „Website-Stile“ auf die Anpassung Zeichenabstand, um den Abstand zwischen den Buchstaben zu ändern.

Beim Festlegen des Buchstabenabstands:

  • Negative Werte können zu einander überlappenden Zeichen führen. Halte den Buchstabenabstand bei 0 px oder höher, um Layoutprobleme auf Mobilgeräten zu vermeiden.
  • Wenn deine Abstandsänderungen auf Mobilgeräten nicht angezeigt werden, vergewissere dich, dass dein Abstand auf px statt auf em gesetzt ist. Für Templates in den Gruppen Bedford und Pacific haben Header auf Mobilgeräten einen bestimmten Maximalabstand.

Zeilenhöhe

Die Art und Weise, wie Sie die Zeilenhöhe ändern, hängt von der Version Ihrer Website ab.

So ändern Sie die Zeilenhöhe:

  1. Klicke beim Bearbeiten einer Seite auf das Pinselsymbol und dann auf Schriftarten.
  2. Klicke unter Globale Schriftartstile auf den Texttyp, den du bearbeiten möchtest: Überschriften, Absätze, Buttons oder Verschiedenes.
  3. Verwende den Schieberegler Zeilenhöhe, um den Abstand anzupassen, oder gib einen neuen em-Wert ein.
  4. Deine Änderungen bleiben erhalten, während du andere Seiteninhalte bearbeitest. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Stelle unter Website-Stile die Anpassung Zeilenhöhe ein, um den Abstand zwischen den Zeilen zu ändern.

Hinweis

Eine Zeilenhöhe von 0em kann zu Textüberlappungen führen, besonders auf Mobilgeräten.

Monospace- oder Code-Text

Monospace-Text hat den gleichen horizontalen Abstand zwischen den einzelnen Zeichen. Wie wir diesen Text nennen und wie du ihn gestalten kannst, hängt von der Version deiner Website ab.

Die Größe und Schriftart von Monospace-Text, der im Titel, Untertitel oder der Beschriftung eines Bild-Blocks verwendet wird, folgt dem Textstil  Absätze 2 im Schriftarten-Menü. Alle anderen Verwendungen von Monospace-Text folgen dem Textstil Verschiedenes . Um eine Schriftart zu gestalten, gehe zu Schriftarten ändern.

Die Farbe von Monospace-Text folgt der Anpassung Absatz (mittelgroß) im Farben-Menü. Weitere Hilfe zum Ändern von Schriftfarben findest du unter Farben ändern.

Die Größe und Farbe von Code-Text folgt den Anpassungen für den Textkörper. Es ist nicht möglich, den Schriftart-Stil zu ändern.

Absatz oder normaler Text

Wie wir den primären Textkörper nennen und wie du ihn gestaltest, hängt von der Version deiner Website ab.

Die Größe und Schriftart des Absatztextes entspricht dem Textstil der Absätze im Menü „Schriftarten“.

Text auf deiner Website folgt deiner Farbpalette für die gesamte Website. Alternativ kannst du einen Textabschnitt hervorheben, indem du das Farbdesign des Abschnitts anpasst.

Welche Stil-Anpassungen die Schriftart, Größe und Farbe des Textkörpers auf Ihrer Website ändern, hängt von Ihrer Template-Gruppe ab:

Template

Schriftart

Größe

Farbe

Adirondack

Hauptinhalt > Text

Hauptinhalt > Text

Hauptinhalt > Text-Farbe

Avenue

Typografie > Textkörper

Typografie > Textkörper

Farben > Textfarbe

Aviator

Typografie > Text-Schriftart

Typografie > Text-Schriftart

Farben > Text

Bedford

Hauptinhalt > Schriftart Seitentext

Hauptinhalt > Schriftart Seitentext

Hauptinhalt > Farbe Seitentext

Brine

Inhalt: Schriftarten > Textkörper

Inhalt: Schriftarten > Textkörper

Inhalt: Farben > Textkörper

Farro

Haupt: Inhaltsschriftarten > Textkörper

Haupt: Inhaltsschriftarten > Textkörper

Haupt: Inhaltsfarben > Textkörper

Five

Hauptinhalt > Textkörper

Hauptinhalt > Textkörper

Hauptinhalt > Textkörper-Farbe

Flatiron

Hauptinhalt > Text

Hauptinhalt > Text

Hauptinhalt > Text-Farbe

Forte

Typografie > Textkörper

Typografie > Textkörper

Typografie > Textkörper Farbe

Galapagos

Gesamte Website > Schriftart Textkörper

Gesamte Website > Schriftart Textkörper

Gesamte Website > Farbe Textkörper

Ishimoto

Hauptinhalt > Text

Hauptinhalt > Textgröße

Hauptinhalt > Textkörper-Farbe

Momentum

Hauptinhalt > Textkörper

Hauptinhalt > Textkörper

Hauptinhalt > Textkörper-Farbe

Montauk

Typografie > Textkörper

Typografie > Textkörper

Farben > Textfarbe

Native

Hauptinhalt > Textkörper

Hauptinhalt > Textkörper-Größe

Hauptinhalt > Textkörper-Farbe

Pacific

Hauptinhalt > Text-Schriftart

Hauptinhalt > Text-Schriftart

Hauptinhalt > Text-Farbe

Skye

Schriftarten für die gesamte Website > Textkörper

Schriftarten für die gesamte Website > Textkörper

Text-Farben für die gesamte Website > Textkörper-Farbe

Supply

Hauptinhalt > Textkörper-Schriftart

Hauptinhalt > Textkörper-Schriftart

Hauptinhalt > Textkörper-Farbe

Tremont

Schriftarten für gesamte Website > Textkörper-Schriftart

Schriftarten für gesamte Website > Textkörper-Schriftart

Schriftfarben für gesamte Website > Body-Farbe

Wells

Optionen für gesamte Website > Text

Optionen für gesamte Website > Textgröße

Optionen für gesamte Website > Überschriftenfarbe

Wexley

Hauptinhalt > Textkörper-Schriftart

Hauptinhalt > Textkörper-Schriftart

Hauptinhalt > Textkörper-Farbe

York

Website: Typografie > Body-Schriftart

Website: Typografie > Body-Schriftart

Website: Typografie > Textkörper-Farbe

Zitat

In einem Text-Block variiert der Zitatstil je nach Version deiner Website.

Der Zitatstil entspricht der Schriftart und Farbe für diesen Texttyp.

Wenn Ihr Zitat-Text beispielsweise Text Überschrift 2 ist, hat das Zitat dieselbe Schriftart und Größe wie der andere Text der Überschrift 2 auf Ihrer Website. Die Farbe des Anführungstextes folgt den Farben für diesen Abschnitt.

Tipp

Alternativ kannst du einen Zitat-Blockverwenden, der über eigene Stil-Optionen verfügt.

Der Zitatstil variiert je nach Template. In einigen Templates befindet sich beispielsweise eine vertikale Linie links neben dem Zitat, um eine visuelle Abgrenzung hinzuzufügen.

Tipp

Verwende alternativ einen Zitat-Block. Der Block hat in einigen Templates seine eigenen Stil-Optionen, damit sich das Zitat vom Rest der Seite abhebt.

Text-Stile für Zitate

Hier siehst du, wie du Zitat-Text in diesen Template-Familien gestalten kannst. In einigen Templates folgt der Zitattext den gleichen Stilen wie der Zitat-Block.

Template-Gruppe

Schriftart

Farbe

Linien

Adirondack

Folgt dem Textkörper

Folgt dem Textkörper

Nein

Avenue

Folgt dem Textkörper

Folgt dem Textkörper

Ja

Aviator

Anpassung Zitat-Schriftart

Anpassung Zitat-Text

Nein

Bedford

Folgt dem Textkörper

Folgt dem Textkörper

Nein

Brine

Folgt dem Textkörper

Folgt dem Textkörper

Ja

Farro

Folgt dem Textkörper

Folgt dem Textkörper

Ja

Five

Anpassung Blockzitat

Folgt dem Textkörper

Nein

Flatiron

Anpassung Zitat-Schriftart

Anpassung Zitat-Farbe

Nein

Forte

Folgt dem Textkörper

Folgt dem Textkörper

Nein

Galapagos

Folgt dem Textkörper

Folgt dem Textkörper

Ja

Ishimoto

Folgt dem Textkörper

Folgt dem Textkörper

Ja

Momentum

Folgt dem Textkörper

Folgt dem Textkörper

Nein

Montauk

Folgt dem Textkörper

Folgt dem Textkörper

Ja

Native

Anpassungen Zitate und Zitat-Größe

Folgt dem Textkörper

Ja

Pacific

Folgt dem Textkörper

Folgt dem Textkörper

Ja

Skye

Folgt dem Textkörper

Folgt dem Textkörper

Ja

Supply

Folgt dem Textkörper

Folgt dem Textkörper

Ja

Tremont

Folgt dem Textkörper

Folgt dem Textkörper

Ja

Wells

Anpassungen Zitat und Zitat-Größe

Folgt dem Textkörper

Nein

Wexley

Anpassung Zitat-Schriftart

Folgt dem Textkörper

Nein

York

Folgt dem Textkörper

Folgt dem Textkörper

Ja

Größe

Der Vorgang zum Ändern der Textgröße hängt von der Version deiner Website ab.

Klicke im Menü „Schriftarten“ auf ein Schriftartpaket, um es auf deine Website anzuwenden, und wähle dann eine Basisgröße aus. Alle anderen Textgrößen beziehen sich auf diese Größe. Du kannst auch auf Stile zuweisen klicken, um die Schriftgröße für einen bestimmten Textbereich festzulegen.

Ausführliche Schritte finden Sie unter Schriftarten ändern.

Klicke unter Website-Stile auf die Anpassung Größe, um die Größe der Schriftart festzulegen. Du kannst den Schieberegler verwenden oder manuell eine Schriftgröße eingeben.

In einigen Templates können Sie die maximale oder minimale Größe für Schriftarten auf verschiedenen Bildschirmgrößen festlegen. Weitere Informationen finden Sie unter Schriftarten skalieren.

Tipp

Alle Squarespace-Websites haben ein Responsive Design, das die Textgrößen Ihrer Website für jeden Bildschirm optimiert.

Texttransformation

Verwende Texttransformation, um die Groß-/Kleinschreibung auf Text anzuwenden, einschließlich:

  • Großschreibung – Den Ersten Buchstaben Jedes Wortes Groß Schreiben
  • Großbuchstaben – ALLES IN GROSSBUCHSTABEN
  • Kleinschreibung – jeder buchstabe wird kleingeschrieben

Diese Anpassung gilt nur für bestimmte Schriftarten und Textgruppen.

Texttransformation wird in verschiedenen Bereichen angezeigt, abhängig von der Version deiner Website.

  1. Klicke beim Bearbeiten einer Seite auf das Pinselsymbol und dann auf Schriftarten.
  2. Klicke unter Globale Schriftarten-Stile auf den Texttyp, den du ändern möchtest: Überschriften, Absätze, Buttons oder Verschiedenes.
  3. Wähle im Drop-down-Menü Texttransformation eine Stiloption aus.
  4. Deine Änderungen bleiben erhalten, während du andere Seiteninhalte bearbeitest. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Verwende das Dropdown-Menü Texttransformation unter „Website-Stile“ in jeder gewünschten Schriftartänderung.

Gewicht

Die Art und Weise, wie Sie die Textstärke ändern, hängt von der Version Ihrer Website ab.

  1. Klicke beim Bearbeiten einer Seite auf das Pinselsymbol und dann auf Schriftarten.
  2. Klicke unter Globale Schriftartenstile auf den Texttyp, den du ändern möchtest: Überschriften, Absätze, Buttons oder Verschiedenes.
  3. Wählen Sie im Dropdown-Menü Stärke eine Stärkeoption aus.
  4. Deine Änderungen bleiben erhalten, während du andere Seiteninhalte bearbeitest. Klicke auf Speichern, um deine Änderungen zu speichern und die Bearbeitung fortzusetzen, oder klicke auf Beenden und dann auf Speichern, um den Editor zu schließen.

Verwenden das Drop-down-Menü Stärke unter „Website-Stile“ in jeder gewünschten Schriftartänderung, um Text dicker oder dünner zu machen.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.