Responsive Skalierung
Schriftgröße in % @Phone (<576px)
Feldtyp:
Nummernfeld
Beispiel Wert:80
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"
Technischer Name:twt-font-size-html-xs
Mit dieser Konfiguration kannst du die Standard-Schriftgröße im entsprechenden Viewport prozentual verkleinern.
Bitte beachte aus Gründen der Barrierefreiheit, dass die Schrift nicht kleiner als 16px sein sollte.
Beispiel: 80
Schriftgröße in % @Phone (landscape) (≥576px)
Feldtyp:
Nummernfeld
Beispiel Wert:90
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"
Technischer Name:twt-font-size-html-sm
Mit dieser Konfiguration kannst du die Standard-Schriftgröße im entsprechenden Viewport prozentual verkleinern.
Bitte beachte aus Gründen der Barrierefreiheit, dass die Schrift nicht kleiner als 16px sein sollte.
Beispiel: 90
Schriftgröße in % @Desktop (≥1200px)
Feldtyp:
Nummernfeld
Beispiel Wert:100
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"
Technischer Name:twt-font-size-html-xl
Mit dieser Konfiguration kannst du die Standard-Schriftgröße im entsprechenden Viewport prozentual verkleinern.
Bitte beachte aus Gründen der Barrierefreiheit, dass die Schrift nicht kleiner als 16px sein sollte.
Beispiel: 100
Text
Schriftart
Feldtyp:
Schriftart
Beispiel Wert:'Inter', sans-serif
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"
Technischer Name:sw-font-family-base
Theme-Schriften werden automatisch von deinem Server geladen. Andere Schriften müssen individuell hinzugefügt werden.
Welche Schriften mitgeliefert werden, steht im Abschnitt Google Fonts, wie die Schriftkonfiguration funktioniert in der Wissensdatenbank.
Beispiel: 'Inter', sans-serif
Größenkorrektur
Feldtyp:
Nummernfeld
Beispiel Wert:100
Mögliche Werte:75 bis 125
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"
Technischer Name:twt-font-family-base-size-adjust
Skaliert die oben gewählte Schriftart, ohne die Schriftgrößen anzupassen. 100 = keine Korrektur. Der Wert gilt für die Schriftart selbst, also überall dort, wo sie im Shop verwendet wird. Wirkt nicht bei Inter (wird von Shopware geladen), nicht bei aktiviertem Google-Fonts-Import und nicht bei eigenen Schriften.
Die Korrektur vergrößert nur die Buchstaben, nicht die Flächen um sie herum. Ein Button oder ein Badge behält seine Höhe, weil sich die Zeilenhöhe an der Schriftgröße orientiert und die bleibt unverändert. Der Text wird also größer, der Abstand zum Rand kleiner.
Die Breite wächst dagegen mit. Prüfe nach einer Änderung Buttons, Badges und die Navigation auf umbrechende Beschriftungen.
Ab etwa 120 rücken bei mehrzeiligem Fließtext die Zeilen sichtbar zusammen, weil auch der Zeilenabstand unverändert bleibt.
Textfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:#111111
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"
Technischer Name:sw-text-color
In diesem Feld sind derzeit keine ThemeWare® Variablen ($twt-...) möglich.
Variable: $sw-text-color
Schriftgröße
Feldtyp:
Nummernfeld
Beispiel Wert:16
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"
Technischer Name:twt-font-size-base
Überschriften
Schriftart
Feldtyp:
Schriftart
Beispiel Wert:'Inter', sans-serif
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:sw-font-family-headline
Theme-Schriften werden automatisch von deinem Server geladen. Andere Schriften müssen individuell hinzugefügt werden.
Welche Schriften mitgeliefert werden, steht im Abschnitt Google Fonts, wie die Schriftkonfiguration funktioniert in der Wissensdatenbank.
Beispiel: 'Inter', sans-serif
Größenkorrektur
Feldtyp:
Nummernfeld
Beispiel Wert:100
Mögliche Werte:75 bis 125
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:twt-font-family-headline-size-adjust
Skaliert die oben gewählte Schriftart, ohne die Schriftgrößen anzupassen. 100 = keine Korrektur. Der Wert gilt für die Schriftart selbst, also überall dort, wo sie im Shop verwendet wird. Wirkt nicht bei Inter (wird von Shopware geladen), nicht bei aktiviertem Google-Fonts-Import und nicht bei eigenen Schriften.
Die Korrektur vergrößert nur die Buchstaben, nicht die Flächen um sie herum. Ein Button oder ein Badge behält seine Höhe, weil sich die Zeilenhöhe an der Schriftgröße orientiert und die bleibt unverändert. Der Text wird also größer, der Abstand zum Rand kleiner.
Die Breite wächst dagegen mit. Prüfe nach einer Änderung Buttons, Badges und die Navigation auf umbrechende Beschriftungen.
Ab etwa 120 rücken bei mehrzeiligem Fließtext die Zeilen sichtbar zusammen, weil auch der Zeilenabstand unverändert bleibt.
Textfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-color-brand-primary
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:sw-headline-color
In diesem Feld sind derzeit keine ThemeWare® Variablen ($twt-...) möglich.
Variable: $sw-headline-color
Schriftgröße (h1)
Feldtyp:
Nummernfeld
Beispiel Wert:36
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:twt-font-size-h1
Schriftgröße (h2)
Feldtyp:
Nummernfeld
Beispiel Wert:28
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:twt-font-size-h2
Schriftgröße (h3)
Feldtyp:
Nummernfeld
Beispiel Wert:24
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:twt-font-size-h3
Schriftgröße (h4)
Feldtyp:
Nummernfeld
Beispiel Wert:20
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:twt-font-size-h4
Schriftgröße (h5)
Feldtyp:
Nummernfeld
Beispiel Wert:16
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:twt-font-size-h5
Schriftgröße (h6)
Feldtyp:
Nummernfeld
Beispiel Wert:14
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"
Technischer Name:twt-font-size-h6
Links
Linkfarbe
Feldtyp:
Farbauswahl
Beispiel Wert:$sw-color-brand-primary
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Links"
Technischer Name:twt-link-color
Wähle die gewünschte Farbe für allgemeine Links in der Storefront.
Beta: Diese Konfiguration befindet sich in der Testphase, probiere Sie gerne einmal aus.
Hinweis: Die Hover-Farbe wird ebenfalls aus dieser Farbe generiert.
Strichstärke
Strichstärke (light)
Feldtyp:
Nummernfeld
Beispiel Wert:400
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"
Technischer Name:twt-font-weight-light
Wähle die gewünschte Schriftstärke:
100 = Thin (Hairline)
200 = Extra Light (Ultra Light)
300 = Light
400 = Normal (Regular)
500 = Medium
600 = Semi Bold (Demi Bold)
700 = Bold
800 = Extra Bold (Ultra Bold)
900 = Black (Heavy)
950 = Extra Black (Ultra Black)
Strichstärke (normal)
Feldtyp:
Nummernfeld
Beispiel Wert:400
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"
Technischer Name:twt-font-weight-normal
Wähle die gewünschte Schriftstärke:
100 = Thin (Hairline)
200 = Extra Light (Ultra Light)
300 = Light
400 = Normal (Regular)
500 = Medium
600 = Semi Bold (Demi Bold)
700 = Bold
800 = Extra Bold (Ultra Bold)
900 = Black (Heavy)
950 = Extra Black (Ultra Black)
Strichstärke (bold)
Feldtyp:
Nummernfeld
Beispiel Wert:600
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"
Technischer Name:twt-font-weight-bold
Wähle die gewünschte Schriftstärke:
100 = Thin (Hairline)
200 = Extra Light (Ultra Light)
300 = Light
400 = Normal (Regular)
500 = Medium
600 = Semi Bold (Demi Bold)
700 = Bold
800 = Extra Bold (Ultra Bold)
900 = Black (Heavy)
950 = Extra Black (Ultra Black)
Google Fonts
Google Fonts importieren
Feldtyp:
Auswahlfeld
Verfügbare Werte:
• nein
• ja
Beispiel Wert:nein
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"
Technischer Name:twt-google-font-import
Wähle aus, ob Google Fonts über die Google Fonts API geladen werden sollen (ja) oder nicht (nein).
Wichtig: Lasse Dich vor der Nutzung von Font APIs wie z.B. Google Fonts bezüglich Datenschutz-Grundverordnung (DSGVO) rechtlich beraten.
Strichstärke für Google Fonts (Text)
Feldtyp:
Textfeld
Beispiel Wert:400,600
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"
Technischer Name:twt-font-family-base-font-weight
Wähle die gewünschten Schriftstärken:
100 = Thin (Hairline)
200 = Extra Light (Ultra Light)
300 = Light
400 = Normal (Regular)
500 = Medium
600 = Semi Bold (Demi Bold)
700 = Bold
800 = Extra Bold (Ultra Bold)
900 = Black (Heavy)
950 = Extra Black (Ultra Black)
Beispiel: 400,600
Strichstärke für Google Fonts (Überschriften)
Feldtyp:
Textfeld
Beispiel Wert:400,600
Pfad zur Einstellung:
Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"
Technischer Name:twt-font-family-headline-font-weight
Wähle die gewünschten Schriftstärken:
100 = Thin (Hairline)
200 = Extra Light (Ultra Light)
300 = Light
400 = Normal (Regular)
500 = Medium
600 = Semi Bold (Demi Bold)
700 = Bold
800 = Extra Bold (Ultra Bold)
900 = Black (Heavy)
950 = Extra Black (Ultra Black)
Beispiel: 400,600