Typografie im Style-Editor: Schriften und Größen gezielt anpassen
Im Tab Typografie des Style-Editors steuerst du, mit welchen Schriften deine Formulare gerendert werden und wie groß diese Schriften – getrennt nach Desktop und Mobile – angezeigt werden. Alle Änderungen werden live in der Vorschau angewendet und beim nächsten Speichern persistiert.
Voraussetzungen
- Ein Formular in deinem Funnelforms-Account mit Schreibrechten.
- Das Hochladen einer eigenen Schrift ist nur in den höheren Tarifen verfügbar. Free-Tier-Konten sehen den Bereich in der gesperrten Variante; Google Fonts stehen weiterhin allen Tarifen zur Verfügung.
Schrift-Auswahl
Der Bereich Schriften bietet drei unabhängige Schrift-Slots:
- Überschrift-Schrift – wird auf alle Frage-Titel angewendet.
- Fließtext-Schrift – wird auf Beschreibungs- und Fließtexte angewendet.
- Formularelemente-Schrift – wird auf Button-Beschriftungen und Antwortoptionen angewendet.
Jeder Slot öffnet eine Auswahlliste mit einer kuratierten Auswahl an Google Fonts und einer Suchleiste oben. Die aktuell ausgewählte Schrift wird im Trigger in ihrer eigenen Schriftart vorgeschaut, damit du sofort siehst, was du wählst.
Eigene Schrift hochladen
Oberhalb der drei Slots gibt es den Bereich Eigene Schrift. Lädst du dort eine Schriftdatei hoch und aktivierst sie, erscheint sie zusätzlich ganz oben in allen drei Dropdowns – mit einem grünen Markierungsbalken und dem Hinweis, dass es sich um deine eigene Schrift handelt. Du kannst sie dann genauso wie eine Google-Schrift für Überschrift, Fließtext oder Formularelemente zuweisen. Solange die eigene Schrift aktiviert und gültig ist, wird sie sowohl im Editor als auch in der ausgelieferten Form geladen.
Schriftgrößen (Desktop)
Im Block Schriftgrößen stellst du die Desktop-Größen über Slider ein:
- Überschriftgröße – 16 px bis 48 px (1-px-Schritte).
- Fließtextgröße – 12 px bis 24 px.
- Formularelemente-Größe – 10 px bis 20 px.
- Eingabefeld-Größe – 12 px bis 24 px.
Schriftgrößen (Mobile)
Direkt darunter liegt der Block Mobile Schriftgrößen mit eigenen Reglern für mobile Endgeräte:
- Mobile Überschriftgröße – 14 px bis 40 px.
- Mobile Fließtextgröße – 10 px bis 20 px.
- Mobile Formularelemente-Größe – 8 px bis 18 px.
- Mobile Eingabefeld-Größe – 10 px bis 20 px.
Setzt du einen mobilen Wert nicht aktiv, übernimmt das System automatisch etwa 85 % des entsprechenden Desktop-Wertes als Voreinstellung. So ist mobile Lesbarkeit auch ohne manuelle Anpassung sichergestellt.
Textstil
Im Block Textstil wählst du über ein Dropdown die globale Schriftstärke: Normal, Medium oder Bold. Die Schriftstärke wirkt auf den Fließtext und damit auf den restlichen Text deines Formulars.
Zeilenhöhen (Desktop & Mobile)
Die Blöcke Desktop-Zeilenhöhen und Mobile Zeilenhöhen enthalten jeweils vier Slider für Überschrift, Fließtext, Formularelemente und Eingabefeld. Der Bereich reicht von 1.0 bis 2.5 in 0.1-Schritten. Ist ein mobiler Wert nicht gesetzt, wird der jeweilige Desktop-Wert als Fallback genutzt.
Was du beachten solltest
- Eine zu hohe Überschriftgröße in Kombination mit kurzen Bildschirmbreiten kann auf Mobile zu Zeilenumbrüchen führen. Nutze dafür gezielt die Mobile-Slider.
- Wenn du eine eigene Schrift hochlädst, achte auf eine korrekte Web-Font-Datei (woff/woff2). Andere Formate werden vom Browser unter Umständen nicht geladen, und das Formular fällt dann auf die System-Schrift zurück.
- Die Formularelemente-Schrift wirkt sich nicht nur auf Buttons aus, sondern auch auf alle klickbaren Antwortoptionen.