CSS

⌘K
  1. Home
  2. Docs
  3. CSS
  4. CSS Fonts
  5. CSS Fonts Size

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

EinheitBeschreibungBeispiel
pxFest und nicht skaliertfont-size: 14px;
emRelativ zur Schriftgröße des Elternelementsfont-size: 1.2em;
remRelativ zur Root-Schriftgrößefont-size: 1.5rem;
%Prozentual relativ zur Elterngrößefont-size: 120%;
vwProzentsatz der Breite des Ansichtsfenstersfont-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

Wie unterscheidet sich em von rem?

em ist relativ zur Schriftgröße des direkten Elternelements, während rem immer auf die Root-Schriftgröße (html-Element) bezogen ist.

Welche Schriftgröße eignet sich für mobile Geräte?

Zwischen 14px und 16px wird für Fließtext empfohlen, damit die Lesbarkeit gewährleistet ist.

Kann font-size Animationen haben?

Ja, Sie können Schriftgrößen mit transition oder animation animieren, um interessante Effekte zu erzielen.