--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/typografie' title: 'Textgröße und -farbe ändern | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:56:53+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Machen Sie einen Lead-Satz größer, setzen Sie ein Zitat in Ihre Markenfarbe oder machen Sie eine Überschrift weiß auf einem dunklen Foto. Mit Font size und Font color im Style-Panel ändern Sie den gesamten Text in einem Element. Für einen Textteil nutzen Sie stattdessen die Symbolleiste des Texteditors. Für Größen und Farben, die jede Seite teilt, nutzen Sie Ihr Theme. Das Video folgt dem Rezept unten: Es macht aus einem Satz einen Lead mit größerer Schrift und Markenfarbe. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Textgröße und -farbe ändern' description: |- Machen Sie einen Lead-Satz größer, setzen Sie ein Zitat in Ihre Markenfarbe oder machen Sie eine Überschrift weiß auf einem dunklen Foto. Mit Font size und Font color im Style-Panel ändern Sie den gesamten Text in einem Element. Für einen Textteil nutzen Sie stattdessen die Symbolleiste des Texteditors. Für Größen und Farben, die jede Seite teilt, nutzen Sie Ihr Theme. Das Video folgt dem Rezept unten: Es macht aus einem Satz einen Lead mit größerer Schrift und Markenfarbe. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:56:53+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/typografie' articleSection: 'Elemente gestalten' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/typografie' description: |- Machen Sie einen Lead-Satz größer, setzen Sie ein Zitat in Ihre Markenfarbe oder machen Sie eine Überschrift weiß auf einem dunklen Foto. Mit Font size und Font color im Style-Panel ändern Sie den gesamten Text in einem Element. Für einen Textteil nutzen Sie stattdessen die Symbolleiste des Texteditors. Für Größen und Farben, die jede Seite teilt, nutzen Sie Ihr Theme. Das Video folgt dem Rezept unten: Es macht aus einem Satz einen Lead mit größerer Schrift und Markenfarbe. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Elemente gestalten](/de/hc/documentation/learn-dxpr-builder/element-settings) # Textgröße und -farbe ändern. DXPR Builder lernenSeiten erstellenElemente gestalten ## In diesem Leitfaden Verwandte Leitfäden - [Auf Abschnitte verlinken und Stile per Klassen wiederverwenden](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/eigenes-css) Machen Sie einen Lead-Satz größer, setzen Sie ein Zitat in Ihre Markenfarbe oder machen Sie eine Überschrift weiß auf einem dunklen Foto. Mit **Font size** und **Font color** im **Style**-Panel ändern Sie den gesamten Text in einem Element. Für einen Textteil nutzen Sie stattdessen die Symbolleiste des Texteditors. Für Größen und Farben, die jede Seite teilt, nutzen Sie Ihr Theme. Das Video folgt dem Rezept unten: Es macht aus einem Satz einen Lead mit größerer Schrift und Markenfarbe. ## Bevor Sie beginnen - Öffnen Sie die Seite in DXPR Builder; wenn Sie auf ein Element zeigen, erscheint seine Steuerleiste mit **More**. Neu im Builder? Siehe [Ihre erste Seite](/de/hc/dokumentation/dxpr-builder-lernen/erste-schritte/erste-seite). - **Speichern** im Dialog behält eine Änderung im Editor. **Speichern** in der Builder-Symbolleiste über Ihrem Inhalt speichert die Seite und zeigt „Saved field“. - **Nutzen Sie das Style-Panel** für ein Element: einen Lead-Absatz, ein Zitat, eine Überschrift auf einem Foto. - **Nutzen Sie den Texteditor** für einen Textteil und die Struktur. Machen Sie eine Überschrift mit **Heading 2** oder **Heading 3** zu einer echten Überschrift, nicht zu einer größeren **Normal**-Zeile. Screenreader und Suchmaschinen lesen die Ebene, nicht die Größe. - **Nutzen Sie die Styles-Liste des Editors** für Marken-Textstile. Ihr Webmaster legt sie unter **General Settings** > **Text Editor** > **Custom styles** (`/admin/dxpr_studio/dxpr_builder/settings`) fest. - **Nutzen Sie Ihr Theme** für die Body-Schrift, Überschriftengrößen und Linkfarben. ## Rezept: ein Lead-Satz in Ihrer Markenfarbe 1. Fügen Sie ein **Text**-Element hinzu und geben Sie einen oder zwei Sätze als **Normal**-Text ein. 2. Fahren Sie mit der Maus darüber, klicken Sie auf **More** und dann auf **Settings**. 3. Öffnen Sie das **Style**-Panel und ziehen Sie **Font size** auf 20. Der Text wächst beim Ziehen. 4. Öffnen Sie **Font color** und wählen Sie Ihre Markenfarbe aus den Farbfeldern oder geben Sie ihren Code, zum Beispiel #1a4d8f, in das Farbfeld ein. 5. Klicken Sie im Dialog auf **Speichern**. Mit 20 px zählt der Satz als normaler Text, braucht also einen Kontrast von 4,5 zu 1. Geben Sie Ihren Farbcode und die Hintergrundfarbe in einen Kontrastprüfer ein; eine weiße Seite ist #ffffff. 6. Klicken Sie in der Symbolleiste auf **Speichern**. ## Was Sie sehen Der Satz wächst auf 20 px und nimmt Ihre Markenfarbe an. Überschriften und Links im selben Text-Element übernehmen diese Farbe ebenfalls, behalten aber ihre eigene Größe. ## Wie die Einstellungen funktionieren ### Font size **Font size** reicht von 0 bis 100 px und 0 behält die Theme-Größe. Der Wert gilt auf jeder Bildschirmgröße gleich: Eine 48-px-Zeile auf dem Desktop ist auch 48 px auf dem Smartphone. Die Größe liegt auf dem Element und Text mit eigener Größe behält sie. Überschriften meist schon, denn Bootstrap bemisst sie aus der Basisgröße der Seite. Text, den Sie mit dem Schriftgrößenwerkzeug des Editors bemessen haben, behält seine Größe ebenfalls. ### Font color Die Auswahl zeigt die Palette Ihres Themes als Farbfelder, wenn Ihre Website eine hat. Dazu gibt es einen Opazitätsregler und ein Feld, in das Sie einen Farbcode eingeben, zum Beispiel #1a4d8f. **Clear** in der Auswahl stellt den Text auf die Theme-Farbe zurück. Auf einem Inhaltselement wie Text, Card oder Alert erreicht die Farbe alles darin, Überschriften und Links eingeschlossen. Auf einer **Section** erreicht sie nur Text ohne eigene Farbe. Überschriften und Links, die Ihr Theme färbt, behalten dort ihre Farbe. Bootstrap-Farbklassen sind mit `!important` markiert, schlagen also **Font color**. Ein Beispiel ist der Chip **Primary text color** unter **HTML classes**. Ein anderes ist ein Editorstil wie **Primary Brand Text** auf einem Textteil. Auf einem **Button** liegt die Farbe auf dem Button selbst und ersetzt die Hover-Farbe des Themes. Stellen Sie **Font color** ebenfalls in **Hover style** ein. ### Hover Das **Hover style**-Panel hat seine eigene **Font color** und **Font size**. Eine größere Größe beim Darüberfahren schiebt den Inhalt darum herum, sodass eine Farbänderung meist die ruhigere Wahl ist. ## Kontrast Damit die meisten Menschen Text lesen können, verlangen die WCAG-2-Regeln auf Level AA diesen Kontrast: | Text | Kontrast zum Hintergrund | |---|---| | Normaler Text | mindestens 4,5 zu 1 | | Großer Text: 24 px (18 pt) oder mehr, oder 19 px (14 pt) oder mehr in Fett | mindestens 3 zu 1 | Messen Sie auf einem Foto an der hellsten Stelle hinter dem Text. Testen Sie Ihr Farbpaar mit einem Kontrastprüfer, zum Beispiel dem [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/). ## Wenn Sie es nicht sehen - **Die Überschrift im Text ist nicht gewachsen.** Die Überschrift hat ihre eigene Größe aus Ihrem Theme. Wählen Sie eine andere Überschriftenebene im Texteditor oder nutzen Sie dessen Schriftgrößenwerkzeug. - **Links und Überschriften behalten ihre Farbe.** Auf einer Section behält Text mit eigener Theme-Farbe sie. Stellen Sie stattdessen **Font color** auf dem Text-Element ein. - **Font color tut gar nichts.** Eine Farbklasse wie **Primary text color** oder **White text** unter **HTML classes** gewinnt. Entfernen Sie ihren Chip. - **Ein Textteil behält eine andere Farbe.** Ein Editorstil auf diesem Teil, zum Beispiel **Primary Brand Text**, gewinnt. Entfernen Sie den Stil im Texteditor. - **Font size tut nichts auf einem Zähler.** Circle counter und Number counter haben ihre eigene **Font size**. Nutzen Sie diese. - **Eine Farbfeld-Farbe passt nicht mehr zur Marke.** Ein Farbfeld kopiert die Farbe beim Wählen. Wählen Sie das Farbfeld nach einer Palettenänderung erneut. - **Die Markenfarbe besteht die Kontrastprüfung nicht.** Wählen Sie einen dunkleren Ton davon. Oder machen Sie den Text mindestens 24 px groß, sodass das 3-zu-1-Ziel gilt. - **Der Text ist schwer auf einem Foto zu lesen.** Der Kontrast ist zu niedrig. Dunkeln Sie das Foto mit einem Verlauf ab, wie auf der Seite [Hintergründe](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/hintergrund) gezeigt. - **Der Button hat seine Hover-Textfarbe verloren.** Ihre **Font color** ersetzt die Hover-Farbe des Themes. Stellen Sie **Font color** ebenfalls in **Hover style** ein. ## Wie geht es weiter? - [HTML-ID und Klassen](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/eigenes-css): Einen Textstil über eine Klasse wiederverwenden, statt ihn auf jedem Element zu setzen.