Typografie & Farben
Die globalen Farben und Schriften des Shops
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.
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.
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:
.png?alt=media)
Schwellenwert 4.5
Schwellenwert 2
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.
Je nach Aktion im Shop, werden vom System Status-Meldungen angezeigt. Die typischen Farben verschiedenen Statusmeldungen findest Du hier.
Beispiele:
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.
Über das Theme stehen Dir alle 1000+ 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 Schriftschnitte werden miteinander ergänzt, sollten sich diese in den Feldern unterscheiden.
.png?alt=media)
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.
Nach der Auswahl der Schrift können die Schriftschnitte eingesehen werden, welche die Schriftart bereitstellt. In diesem Beispiel bietet Roboto Condensed die Schriftschnitte
Light 300, Light 300 italic, Regular 400, Regular 400 italic, Bold 700 und Bold 700 italic.Du musst keine tatsächliche Auswahl der Schriftschnitte vornehmen - das passiert erst im Theme! Jedoch erscheint erst nach der Selektion von einem Schriftschnitt das rechte Fenster.
.png?alt=media)
Nach den Klick auf + Select this style öffnet sich im rechten Bereich ein Element, in welchem Du die wichtigen Informationen zur Schrift findest. Notiere Dir den Namen der Schriftfamilie.
Aus
font-family: 'Roboto Condensed', sans-serif; wird 'Roboto Condensed', sans-seriffont-family: sowie das Semikolon entfallen.
Trage nun den Namen der Schriftart in das Feld Schriftart Text (1) oder für Überschriften in das Feld Schriftart Überschrift ein und Ergänze den Wert um eine sogenannte generische Schriftfamilie, falls die Schriftart wider erwarten einmal nicht geladen werden sollte.
Was sind generische Schriftfamilien
Generische Schriftfamilien Beispiel
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.
Generische Schrift | Bedeutung |
|---|---|
serif | Schriftzeichen haben abschließende Striche, ausgeweitete oder zugespitzte Enden oder serifenbetonte Enden. |
sans-serif | Schriftzeichen haben gerade Strichenden. |
monospace | Alle Schriftzeichen haben die gleiche Breite. |
cursive | Schriftzeichen in kursiven Schriftarten haben üblicherweise verbindende Striche oder andere kursive Charakteristiken, die über die von kursiven Schriftzügen hinausgehen. Die Schriftzeichen sind teilweise oder ganz verbunden und das Ergebnis ähnelt eher einer Handschrift als gedruckten Lettern. |
fantasy | Fantasie Schriftarten sind überwiegend dekorative Schriftarten, die verspielte Darstellungen von Schriftzeichen beinhalten. |
.png?alt=media)
Der Inhalt des Feldes Schriftart Text (1) oder Schriftart Überschrift sollte nun so aussehen:
'Robot Condensed', sans-serif
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 liefert.
Stelle sicher, dass Schriften laden (3) aktiv ist und bei den Theme Schriften im Feld Schriftart Text (4) eingestellt ist, dass die Custom Schriften 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.
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.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.
Hier können globale Farben für die Preisdarstellung und den Warenkorb-Button getroffen gewählt werden.
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:
.png?alt=media)
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.
// HSL Color $from sw-border-color
hsl(hue($sw-border-color), saturation($sw-border-color), 98%)
Last modified 4mo ago