Typografie
Guppy nutzt eine durchgängige, responsiv skalierende Typografie auf Bootstrap-5-Basis. Alle Werte sind über die Theme-Konfiguration anpassbar.
Wo finde ich die Einstellungen?
Im Admin: Inhalte → Themes → Guppy Theme → Konfigurieren. Typografie-Felder verteilen sich über mehrere Tabs:
- Layout / Body: Basis-Schriftgröße, Schrift-Familie
- Header / Productcard / Detailpage: Headlines pro Bereich
Typografie-Skala
| Headline | Größe | Zeilenhöhe |
|---|---|---|
| H1 | 32 px | 44 px |
| H2 | 24 px | 36 px |
| H3 | 20 px | 32 px |
| H4 | 18 px | – |
| H5 | 16 px | – |
| H6 | 15 px | – |
| Body | 1 rem (16 px) | – |
Für Display-Größen (Hero-Headlines) stehen drei zusätzliche Stufen zur Verfügung: Display 1, 2, 3.
Eigene Fonts einbinden
Über den Theme Builder lassen sich eigene .woff/.woff2-Dateien hochladen, der Builder generiert die @font-face-Regeln automatisch und stellt die Familien in den Typografie-Feldern zur Auswahl.
Manuelle Einbindung via Child-Theme: siehe Variablen & Tokens.
Default-Schrift
DmfGuppyTheme nutzt die Inter-Schriftfamilie als Default. Die Typografie-Variablen sind so abgestimmt, dass sie auf modernen Bildschirmen gut lesbar sind und gleichzeitig auf mobilen Geräten kompakt bleiben.
Hinweise
Konsistenz
Wenn du Schriftgrößen änderst, halte die Skala harmonisch, z. B. nicht H2 größer als H1 setzen, sonst leidet die semantische Lesbarkeit.
Vollständige Referenz
Alle SCSS-Variablen-Namen für Typografie: Konfigurationsschema → Typografie.