Die CSS-Eigenschaft font-size bestimmt, wie groß ein Text angezeigt wird.
Damit kannst du Überschriften größer machen oder Erklärtexte kleiner.
Es gibt zwei Arten von Schriftgrößen:
• feste Größen – verändern sich nicht (z. B. px)
• relative Größen – passen sich an den Bildschirm oder andere Elemente an (z. B. em, rem, vw)
px ist eine feste Einheit.
Das bedeutet: Die Schrift bleibt immer gleich groß, egal wie groß der Bildschirm ist.
Perfekt für kleine Texte, Labels oder Buttons.
font-size: 20px;
em ist eine relative Einheit.
Sie orientiert sich an der Schriftgröße des Elements, in dem der Text liegt.
Ändert sich die Größe des Eltern-Elements, ändert sich auch die Größe in em.
font-size: 2em; → ergibt 32px
rem funktioniert wie em, aber viel einfacher.
Es bezieht sich immer auf die Basis-Schriftgröße der gesamten Seite (meist 16px).
Dadurch ist rem perfekt für modernes Webdesign.
font-size: 1.5rem; → ergibt 24px
vw bedeutet „Viewport Width“.
Die Schrift hängt hier von der Breite des Bildschirms ab.
Sehr praktisch für große, responsive Überschriften.
font-size: 5vw;| Einheit | Bedeutung | Gut geeignet für… |
|---|---|---|
| px | feste Größe | Buttons, kleine Texte |
| em | relativ zum Eltern-Element | Abstände, Relatives Design |
| rem | relativ zur Basis der ganzen Seite | Allgemeine Schriftgrößen, modernes Webdesign |
| vw | abhängig von der Bildschirmbreite | Große Überschriften, responsive Layouts |