{"id":1068,"date":"2026-05-27T11:14:48","date_gmt":"2026-05-27T11:14:48","guid":{"rendered":"https:\/\/help.excelerate.app\/?post_type=docs&p=1068"},"modified":"2026-05-27T14:07:32","modified_gmt":"2026-05-27T14:07:32","password":"","slug":"typografie","status":"publish","type":"docs","link":"https:\/\/help.excelerate.app\/en\/help\/typografie\/","title":{"rendered":"Typografie"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Anwendung<\/h2>

Gestalte hier deine Typografie und passe alle Textstile individuell an. Die Schriften und Schriftschnitte sind den einzelnen Elementen bereits fest zugewiesen, du musst also nur noch bestimmen, wie diese genau aussehen sollen. Die Textgr\u00f6\u00dfen passen sich dabei automatisch an die jeweilige Bildschirmgr\u00f6\u00dfe an.<\/b> Das sorgt f\u00fcr ein konsistentes Schriftbild auf allen Ger\u00e4ten, das deine Markenwerte transportiert und deinem Interface einen absolut professionellen Look verleiht.<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Typografie \u00dcbersicht finden<\/h2>

Um deine Typografie anzupassen, klicke auf den dritten Punkt \u201eTypografie\u201c.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Typografie<\/div>\n
W\u00e4hle Typografie aus, um weitere Einstellungen zu sehen.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 1 – Typografie \u00dcbersicht<\/h2>

Im Bearbeitungskasten siehst du alle Typografie Werte, die angepasst werden k\u00f6nnen. Hier zeigen wir dir, welche Einstellungen dir insgesamt f\u00fcr die einzelnen Punkte zur Verf\u00fcgung stehen. Alle \u00c4nderungen, die du vornimmst, siehst du sofort in der Vorschau.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Typografie einstellungen<\/div>\n
Passe Schritt f\u00fcr Schritt alle Typografie Werte an. Diese werden f\u00fcr die dunklen Hintergr\u00fcnde \u00fcbernommen. Im zweiten Schritt passt du dann nur noch die Farben f\u00fcr die dunklen Hintergr\u00fcnde an.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 2 – \u00dcberschrift 1 anpassen<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Schrift<\/div>\n
W\u00e4hle eine deiner bereits hochgeladenen Schriften aus, um sie f\u00fcr die \u00dcberschrift 1 zu verwenden.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 3 – Schriftschnitt w\u00e4hlen<\/h2>

Du kannst standardm\u00e4\u00dfig immer mindestens zwischen Regular und Bold w\u00e4hlen. Je nachdem, welche weiteren Schriftschnitte du hochgeladen hast, kannst du diese hier ebenfalls ausw\u00e4hlen.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Schriftschnitt<\/div>\n
W\u00e4hle einen deiner hochgeladenen Schriftschnitte aus, um ihn anzuwenden.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 4 – Typografie Farbe einstellen<\/h2>

Passe die Farbe einer Typografie \u00fcber den Farbpicker an.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Freies Farbfeld<\/div>\n
Bestimme deine Wunschfarbe intuitiv \u00fcber das freie Farbfeld, um den passenden Farbton visuell auszuw\u00e4hlen.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Fl\u00e4che, Verlauf & Pipette<\/div>\n
Wechsle flexibel zwischen einer soliden Fl\u00e4che und einem Farbverlauf oder nutze die Pipette, um jede beliebige Farbe direkt von deinem Bildschirm abzugreifen.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Farbton & Deckkraft<\/div>\n
\u00dcber die Schieberegler kannst du sowohl den Farbton als auch die Deckkraft deiner Auswahl pr\u00e4zise einstellen.<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
Farbwerte & Favoriten<\/div>\n
Gib deine exakten HEX- oder RGB-Werte direkt ein, um Markenfarben exakt zu treffen, oder greife im unteren Bereich schnell auf die am meisten verwendeten Farben zu.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 5 – Zeichenformatierung<\/h2>

Bestimme anschlie\u00dfend die exakten Abmessungen deiner Typografie: Lege die gew\u00fcnschte Schriftgr\u00f6\u00dfe fest, optimiere die Laufweite f\u00fcr eine ideale Lesbarkeit und passe die Zeilenh\u00f6he an.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Schriftgr\u00f6\u00dfe<\/div>\n
Passe die Gr\u00f6\u00dfe der Zeichen individuell an, um eine optimale Lesbarkeit f\u00fcr deine Texte zu garantieren.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Laufweite \/ Zeichenabstand<\/div>\n
Bestimme den Abstand zwischen den einzelnen Buchstaben, um die Lesbarkeit oder \u00c4sthetik zu optimieren.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Zeilenh\u00f6he<\/div>\n
Passe den vertikalen Abstand zwischen den Zeilen eines Absatzes<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 6 – Versalien<\/h2>

Aktiviere den Versalien Toggle, um deinen Text vollst\u00e4ndig in Gro\u00dfbuchstaben darzustellen.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

\u00dcberschrift 2<\/h1>

Der Standardwert f\u00fcr die \u00dcberschrift H2<\/span>\u00a0liegt meist zwischen 32 und 40 px.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

\u00dcberschrift 3<\/h1>

Der Standardwert f\u00fcr die \u00dcberschrift H3<\/span>\u00a0liegt meist zwischen 24 und 32 px<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Einleitung<\/h1>

Der Standardwert f\u00fcr den Einleitungstext liegt in der Regel zwischen 18 und 22 px.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Flie\u00dftext<\/h1>

Der Standardwert f\u00fcr Flie\u00dftexte liegt bei 16\u201320 px. Tipp: Nutze den Wert eurer eigenen Website oder CD f\u00fcr einen konsistenten Brand-Look.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Liste<\/h1>

Der Standardwert f\u00fcr Aufz\u00e4hlungspunkte orientiert sich meist am Flie\u00dftext und liegt zwischen 16 und 20 px.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

<\/div>\n\t\t\t<\/div>\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Schritt 7 – Typografie f\u00fcr dunkle Hintergr\u00fcnde anpassen<\/h2>

Nachdem du die helle Typografiefarbe angepasst hast, ben\u00f6tigt das Theme einen passenden dunklen Wert. Nutze den Farbpicker, um die Typografie perfekt auf dunkle Hintergr\u00fcnde abzustimmen und \u00fcberall f\u00fcr optimalen Kontrast zu sorgen.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Hintergrundfarbe tauschen<\/div>\n
Wechsel hier ganz einfach die Hintergrundfarbe deines Themes, um den Kontrast perfekt abzustimmen.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Typografie Kontrast optimieren<\/div>\n
Passe die Farbe der Typografie mithilfe des Farbpickers an, um eine optimale Lesbarkeit auf dunklen Hintergr\u00fcnden zu garantieren.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Anwendung Gestalte hier deine Typografie und passe alle Textstile individuell an. Die Schriften und Schriftschnitte sind den einzelnen Elementen bereits fest zugewiesen, du musst also nur noch bestimmen, wie diese genau aussehen sollen. Die Textgr\u00f6\u00dfen passen sich dabei automatisch an die jeweilige Bildschirmgr\u00f6\u00dfe an. Das sorgt f\u00fcr ein konsistentes Schriftbild auf allen Ger\u00e4ten, das deine […]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[20],"doc_tag":[],"class_list":["post-1068","docs","type-docs","status-publish","hentry","doc_category-theme-builder"],"year_month":"2026-06","word_count":590,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"excelerate","author_nicename":"excelerate","author_url":"https:\/\/help.excelerate.app\/en\/author\/excelerate\/"},"doc_category_info":[{"term_name":"Theme Builder","term_url":"https:\/\/help.excelerate.app\/en\/docs-category\/theme-builder\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/comments?post=1068"}],"version-history":[{"count":73,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1068\/revisions"}],"predecessor-version":[{"id":1172,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1068\/revisions\/1172"}],"wp:attachment":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/media?parent=1068"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_category?post=1068"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_tag?post=1068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}