So passen Sie Ihre Schriftgröße mit CSS an

Das CSS Schriftgröße Die Schriftgröße bestimmt, wie groß oder klein der Text auf Ihrer Website erscheint. Die richtige Schriftgröße ist nicht nur eine Frage der Ästhetik, sondern beeinflusst auch die Lesbarkeit, die Zugänglichkeit und letztendlich die Konversionsrate Ihres Shops.

Was ist Schriftgröße in CSS?

Die Schriftgröße Die Eigenschaft steuert die Größe des Textinhalts eines Elements. Standardmäßig rendern die meisten Browser Text in der Größe 16pxSie können dies jedoch global oder pro Element anpassen.

Ejemplo:

p {

  font-size: 16px;

}

Sie können die Größe definieren mit absolute Einheiten (wie Pixel) oder relative Einheiten (mögen em or remDie Wahl der richtigen Methode bestimmt, wie reaktionsschnell und barrierefrei Ihr Text sein wird.

CSS-Einheiten für die Schriftgröße

Es gibt verschiedene Möglichkeiten, die Textgröße in CSS festzulegen. Schauen wir uns die gängigsten Methoden an und wann man welche anwendet.

1. px (Pixel)

Absolutes Prachtexemplar.

• Bleibt immer unverändert, unabhängig von der Bildschirmgröße oder den Benutzereinstellungen.
• Ideal für Logos oder UI-Elemente, die einheitlich bleiben müssen.

Einschränkung: Passt sich nicht den Zoom- oder Schriftgrößeneinstellungen des Browsers an.

h1 {

  font-size: 32px;

}

2. em (Verwandter zum Elternteil)

Relative Einheit.

• 1em entspricht der Schriftgröße des übergeordneten Elements.
• Nützlich, um Text innerhalb einer Komponente proportional zu skalieren.

Hinweis: Kann bei Verschachtelung "komprimiert" werden; 1.2em innerhalb eines übergeordneten Elements mit 1.2em ergibt das 1.44-fache der Basisgröße.

p {

  font-size: 1.2em;

}

3. rem (Relativ zur Wurzel)

Relativ zur Wurzel (html)-Element.

• 1rem = die Schriftgröße des Wurzelelements (üblicherweise 16px).
• Empfohlen für standortweite Konsistenz.
• Leichtere Aufrechterhaltung von Barrierefreiheit und responsivem Design.

h1 {

  font-size: 2.5rem; /* equals 40px if base font-size = 16px */

}

4. % (im Verhältnis zum Elternteil)

Handlungen ähnlich wie em, definiert die Schriftgröße als Prozentsatz des übergeordneten Elements.

p {

  font-size: 100%; /* equals parent’s font size */

}

5. vw / clamp() (Flüssige Typografie)

Moderne responsive Typografie verwendet häufig Ansichtsfenster-Einheiten oder unter der Klemme() Funktion zur Anpassung der Textgröße an die Bildschirmgröße.

h1 {

  font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);

}

Das heisst:

• Minimale Schriftgröße = 1.5rem
• Skaliert basierend auf der Viewport-Breite (2.5vw + 1rem)
• Maximale Schriftgröße = 3rem

Perfekt für Überschriften, die auf Desktop- und Mobilgeräten gleichermaßen gut aussehen.

Bewährte Verfahren für Barrierefreiheit und Lesbarkeit

Gute Typografie verbessert nicht nur das Design, sondern auch die Benutzerfreundlichkeit und die Barrierefreiheit.

• Grundgröße: Verwenden Sie für den Fließtext mindestens 16px (1rem).
• Skalierbare Einheiten: Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, rem or em damit Benutzer problemlos zoomen können.
• Zeilenhöhe: Stelle den Zeilenhöhe: 1.4–1.6 für ein angenehmes Leseerlebnis.
• Kontrast: Stellen Sie sicher, dass der Farbkontrast eingehalten wird. W.C.A.G Standards (mindestens 4.5:1 für normalen Text).
• Vermeiden Sie sehr kleine Schriftgrößen. Auf Mobilgeräten kann alles unter 14px die Lesbarkeit beeinträchtigen.

Beispiel für bewährte Vorgehensweise:

body {

  font-size: 1rem; /* 16px base */

  line-height: 1.5;

}

Bitte beachten Sie, dass die Barrierefreiheit sich auch direkt auf die Suchmaschinenoptimierung auswirkt. Google belohnt Seiten, die mobilfreundlich und gut lesbar sind.

Responsive Schriftgröße in Shopify und GemPages

Verwendung der Theme-Einstellungen von Shopify

Wenn Sie ein Shopify-Theme verwenden, können Sie die Schriftgrößen oft direkt anpassen. Online-Shop > Anpassen > Design-Einstellungen > Typografie.

Viele Designs beinhalten Schieberegler oder Dropdown-Menüs, um die Textgröße global zu steuern (z. B. Fließtext, Überschrift, Schaltflächentext).

Verwendung des GemPages-Editors

Wenn Sie eine feinere Steuerung benötigen, z. B. die Schriftgröße nur für Seiten ändern möchten, die mit GemPages erstellt wurden, können Sie benutzerdefiniertes CSS entweder im Einstellungsfeld > Registerkarte Erweitert > CSS-Abschnitt.

Beispiel: Anpassen der Schriftgröße im Stammverzeichnis mithilfe von Media Queries

:root {

  font-size: 100%; /* base 16px */

}

@media (max-width: 600px) {

  :root {

    font-size: 93.75%; /* ~15px for smaller screens */

  }

}

Dadurch wird sichergestellt, dass Ihre Schriftart auf Mobilgeräten leicht verkleinert wird, wodurch die visuelle Balance erhalten bleibt, ohne das Layout zu beeinträchtigen.

Häufige Fehler und schnelle Lösungen

Häufig gestellte Fragen zur CSS-Schriftgröße

1. Welche Schriftgrößeneinheit eignet sich am besten für CSS?

Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, rem In den meisten Fällen. Es skaliert vom Wurzelelement aus und ist dadurch responsiv und barrierefrei.

2. Welche Schriftgröße ist ideal für den Fließtext von Webseiten?

Um 16px (1rem) für den Fließtext. Sie können die Größe erhöhen, um die Lesbarkeit zu verbessern, insbesondere auf Mobilgeräten.

3. Wie kann ich die Schriftgröße in Shopify ändern?

Gehe zu Theme Customizer > TypografieeinstellungenFalls Ihr Theme diese Funktion nicht bietet, verwenden Sie benutzerdefiniertes CSS oder das Typography-Element von GemPages.

4. Ist kleinere Schriftgröße schlecht für die Suchmaschinenoptimierung?

Indirekt ja. Schlechte Lesbarkeit erhöht die Absprungraten, was sich auf Engagement-Kennzahlen auswirken kann, die wiederum die Suchmaschinenoptimierung beeinflussen.