Typografie & Farben
Die globalen Farben und Schriften des Shops
Theme-Farben
Farben
Im Reiter Farben findest Du die globalen Farbeinstellungen des Themes. Die Primärfarbe (1) und Sekundärfarbe (2) sind die Hauptfarben des Shops.
Die Primär- und Sekundärfarben sollten niemals transparent oder #ffffff (weiß) sein, da diese auch als Vordergrundfarbe auf weißen Hintergründen genutzt werden.
Der Wert für Meta Theme-Farbe (6) gibt eine Farbe an, die Browser verwenden sollten, um die Anzeige der Seite oder der umgebenden Benutzeroberfläche anzupassen. Insbesondere bei mobilen Endgeräten zu sehen.
Body Hintergrund vs Shop Hintergrund
Die globalen Hintergrundfarben des Shops sind in Body Hintergrund und Shop Hintergrund unterteilt. Der Body Hintergrund (4) ist dabei der Hintergrund des gesamten HTML-Dokumentes (Body). Der Shop Hintergrund (5) ist der Hintergrund des Shops, der wiederum auf dem HTML-Dokument liegt.
Achtung: Der Pfeil von der Primärfarbe zum Feld des Body Hintergrundes zeigt, dass Farben anhand ihrer Variablen in anderen Feldern weiter genutzt werden können.
Grundeinstellungen
Es gibt im Theme bestimmte Bereiche, deren Vordergrundfarbe anhand der Hintergrundfarbe ermittelt wird. Das ist beispielsweise bei den Primärbuttons der Fall. Das Kontrastverhältnis bestimmt, wann die Helligkeit der Farbe von "dunkel" zu "hell" wechselt.
Beispiel:
In Shopware 6.5 wurde die Berechnungsgrundlage auf die Web Content Accessibility Guidelines (WCAG) angepasst.
Der Kontrast Schwellenwert (1) dient also zur Berechnung von Kontrastfarben. Ist die Hintergrundfarbe eines Buttons z.B. altrosa #d9ab98 wird bei einem Schwellenwert von 4.5 die Vordergrundfarbe als Kontrastfarbe dunkel errechnet. Bei einem Schwellenwert von 2 wird die Vordergrundfarbe des Buttons hell errechnet.
Die Einstellung des Kontrast Schwellenwertes hat möglicherweise Auswirkungen auf die Lesbarkeit bestimmter Elemente. Im Standard sorgt ein Kontrast Schwellenwert von 4.5 für eine optimale Lesbarkeit.
Status-Ausgaben
Je nach Aktion im Shop, werden vom System Status-Meldungen angezeigt. Die typischen Farben verschiedenen Statusmeldungen findest Du hier.
Beispiele:
Schriftarten
Schriften können lokal über die Theme Schriften genutzt werden oder extern über die Custom Schriften durch Google Fonts eingebunden werden. Zusätzlich haben wir eine Anleitung, wie Du Schriften selbst hosten kannst.
Eigene Schriftarten
Über das Theme stehen Dir alle 1600+ Google Fonts Schriftarten zur Verfügung. Du kannst für Fließtexte und Überschriften separate Schriften oder auch die selbe Schrift definieren.
Möchtest Du für Überschriften und Fließtexte die selbe Schrift verwenden, trage in beide Felder den selben Schriftnamen ein. Die Schriftstärken werden miteinander ergänzt, sollten sich diese in den Feldern unterscheiden.
1. Schrift aussuchen
Um eine Schriftart von Google Fonts zu nutzen, suche Dir einfach je eine Schriftfamilie für Fließtexte (Schriftart Text) und eine Schriftfamilie für Überschriften (Schriftart Überschrift) aus - in diesem Beispiel möchten wir Roboto Condensed als Schriftart für Texte verwenden und geben diese in die Suche ein.
2. Schriftschnitte einsehen
Nach der Auswahl der Schrift können die Schriftschnitte eingesehen werden, welche die Schriftart bereitstellt. In diesem Beispiel bietet 'Roboto Condensed' alle möglichen Schriftschnitte Light 300 bis Bold 900 , da es sich um eine Schriftart handelt.
3. Schrift wählen
Nach den Klick auf Get embed code gelangst Du zu der Seite mit den Einbettungscodes. Hier interessiert uns lediglich der technische Name der Schrift. Notiere Dir daher den Namen der Schriftfamilie. 'Roboto Condensed', sans-serif
font-family: sowie das Semikolon entfallen.
Du musst hier auch keine Auswahl der Schriftschnitte vornehmen - das passiert erst im Theme!
4. Schriftfamilie im Theme hinterlegen.
Trage nun den Namen der Schriftart in das Feld Schriftart Text (1) oder für Überschriften in das Feld Schriftart Überschrift ein. Behalte dabei die generische Schriftfamilie bei, falls die Schriftart wider erwarten einmal nicht geladen werden kann.
Generische Schriftfamilien dienen als Fallback-Mechanismus, ein Mittel, um etwas von der Absicht des Stylesheet Autors zu erhalten für den Fall, wenn keine der angegebenen Schriftarten verfügbar sind.
Der Inhalt des Feldes Schriftart Text (1) oder Schriftart Überschrift sollte nun so aussehen:
Die Schriftstärken (Schriftschnitte) wähle im Feld Schriftstärken Text (2) oder bei Überschriften im Feld Schriftstärken Überschrift aus. Du kannst nur die Schriftschnitte verwenden, welche die Schrift ausliefert.
Stelle sicher, dass Schriften laden (3) aktiv ist und bei den Theme Schriftarten im Feld Schriftart Text (4) eingestellt ist, dass die Eigene Schriftarten verwendet werden sollen.
Um keine unnötigen Ladezeiten zu erzeugen, wähle nur die Schriftstärken aus, welche Du auch wirklich nutzen möchtest. Häufig können für einzelne Elemente spezielle Schriftschnitte in der Konfiguration gewählt werden. Werden Schriftschnitte abgerufen, welche die Schrift nicht ausliefert, wenden Browser dan Näherungsverfahren an.
Theme Schriften
Neben der Einbindung von externen oder selbstgehosteten Schriften, bietet das Theme eine Auswahl an integrierten Schriften. Diese Schriften werden mit dem Theme ausgeliefert und befinden sich nach der Installation auf Deinem Server. Du musst Dir daher bei den Theme Schriften keine Gedanken um den Datenschutz machen.
Theme Schriften können ebenso wie die Custom Schriften für Fließtexte (1) und Überschriften (2) separat eingestellt werden. Die mitgelieferten Schriftschnitte (3) stehen in eckigen Klammern hinter dem Schriftnamen.
Es ist ebenso möglich eine Theme Schrift für z.B. Fließtexte zu verwenden und eine Custom Schrift für die Überschriften. Beachte aber, dass durch die extern-eingebundene Custom-Schrift noch immer eine Verbindung zu den Google Servern besteht, es sei denn, Du hast die Custom-Schrift selbst gehostet und die Option Schriften laden im Abschnitt Custom Schriften deaktiviert.
Sobald für beide Schriften eine andere Auswahl als - Custom Schriftart - gewählt wurde, werden keine Schriften mehr von Google Servern geladen. Die Einstellung Theme Schriften überschreibt die Einstellung der Custom Schriften.
Typografie
Im Abschnitt Typografie können neben den grundlegenden Farben der Schriften auch Schriftgrößen definiert werden.
Die Einstellungen für die Schriftgrößen stehen ab Theme Version 2.1.0 zur Verfügung.
Bitte wähle für Textfarbe immer eine dunkle und für Helle Textfarbe immer einen hellen Farbwert. Durch interne Kontrast-Funktionen werden bei dunklen Shop-Hintergründen automatisch die Helle Textfarbe und bei hellen Shop-Hintergründen automatisch die normale (dunkle) Textfarbe verwendet.
Zusätzlich können neben den Schriftgrößen auch das Schriftgewicht konfiguriert werden. Achte dabei darauf, Werte auszuwählen, welche von den hinterlegten Schriftarten ausgeliefert werden.
E-Commerce
Hier können globale Farben für die Preisdarstellung und den Warenkorb-Button getroffen gewählt werden.
Buttons
Neben den Primär- und Sekundärbuttons werden in der Storefront an verschiedenen Stellen Buttons verwendet. In der Administration werden beispielsweise Light-Buttons verwendet. Die Farben der Buttons können hier angepasst werden:
Im Standard werden die Farben der Buttons anhand der border-color Farbe ermittelt. Dabei werden Farbton, Sättigung anhand der border-color mit einer fest definierten Helligkeit gesetzt. Das hat den Vorteil, dass die Buttons automatisch zu Deinem Farbstil passen.
Last updated
