CSS Fonts Size

CSS Fonts Size: Die font-size-Eigenschaft in CSS legt die Schriftgröße für Text fest. Sie ist ein zentrales Werkzeug, um Textelemente hervorzuheben und die Lesbarkeit zu verbessern. Sie können die Schriftgröße dabei in verschiedenen Maßeinheiten angeben, wie px, em, rem, %, und vw. Jede Maßeinheit bietet bestimmte Vorteile und sollte je nach Kontext und Designanforderungen ausgewählt werden.

Syntax und Werte

selector {
  font-size: value;
}

Mögliche Werte:

• Absolute Einheiten: z. B. px (Pixel)
• font-size: 16px; – Feste Schriftgröße, die nicht anpassbar ist.
• Relative Einheiten: z. B. em, rem, %, vw, vh
• font-size: 1em; – Relativ zur Schriftgröße des Elternelements.
• font-size: 1rem; – Relativ zur Schriftgröße des html-Elements (Root).
• font-size: 100%; – Entspricht der Schriftgröße des Elternelements.

Beispiel:

h1 {
  font-size: 2rem; /* Schriftgröße relativ zur Root-Schriftgröße */
}

p {
  font-size: 16px; /* Feste Schriftgröße */
}

button {
  font-size: 1em; /* Schriftgröße relativ zum Elternelement */
}

Absolute und relative Einheiten im Vergleich

Einheit	Beschreibung	Beispiel
px	Fest und nicht skaliert	font-size: 14px;
em	Relativ zur Schriftgröße des Elternelements	font-size: 1.2em;
rem	Relativ zur Root-Schriftgröße	font-size: 1.5rem;
%	Prozentual relativ zur Elterngröße	font-size: 120%;
vw	Prozentsatz der Breite des Ansichtsfensters	font-size: 5vw;

Responsive Schriftgrößen

Für responsive Designs sind relative Einheiten wie rem, em, und vw besonders geeignet, da sie sich automatisch an unterschiedliche Bildschirmgrößen anpassen. Beispiel:

h1 {
  font-size: 5vw; /* Schriftgröße passt sich der Breite des Fensters an */
}

Verwendung von font-size in der Praxis

Es ist üblich, für Fließtext px oder rem zu nutzen, da so eine konsistente Lesbarkeit gewährleistet wird. Überschriften und Haupttexte können größere Werte erhalten, um die visuelle Hierarchie zu unterstützen.

body {
  font-size: 16px; /* Basisgröße */
}

h1 {
  font-size: 2em; /* 2x Basisgröße */
}

h2 {
  font-size: 1.5em; /* 1.5x Basisgröße */
}

Zusammenfassung

Die font-size-Eigenschaft spielt eine Schlüsselrolle im Design und Layout Ihrer Webseite. Durch eine gut gewählte Kombination aus absoluten und relativen Größen können Sie das Erscheinungsbild und die Lesbarkeit Ihrer Seite optimieren.

Praxisorientierte Übungsaufgaben

1. Setzen Sie die font-size einer Überschrift auf 5vw und testen Sie, wie sie sich auf verschiedenen Bildschirmgrößen verhält.
2. Verwenden Sie rem für den Haupttext und vergleichen Sie das Verhalten mit px-Angaben.
3. Stellen Sie für mobile Geräte die font-size des gesamten Fließtexts auf 1em und beobachten Sie die Änderungen.

Handlungsempfehlungen

• Verwenden Sie px für präzise Schriftgrößen bei kleinen Texten und UI-Elementen.
• Nutzen Sie rem für ein einheitliches und skalierbares Layout.
• Verwenden Sie vw oder vh für dynamische, responsive Designs, insbesondere bei Überschriften.

Häufig gestellte Fragen