Schriftgrößen-Rechner
CSS Schriftgrößen umrechnen: px ↔ em ↔ rem ↔ pt ↔ vw ↔ %. Typografie-Skala, Vorschau, CSS kopieren.
📏 Eingabe
⚙️ Einstellungen
📏 Info: 6 CSS-Einheiten: px, em, rem, pt, vw, %. Basis-Schriftgröße und Viewport einstellbar. Typografie-Skala mit 8 Harmonien (Minor Second → Golden Ratio). Klick auf Wert = kopieren.
CSS-Schriftgrößen verstehen: Einheiten, Skalierung und responsive Design
Die korrekte Wahl und Berechnung von Schriftgrößen ist fundamental für benutzerfreundliche und zugängliche Webseiten. CSS bietet verschiedene Einheiten mit jeweils eigenen Stärken und Anwendungsgebieten. Unser Schriftgrößen-Rechner hilft bei der präzisen Umrechnung zwischen den Einheiten und unterstützt bei der Entwicklung konsistenter typografischer Systeme.
CSS-Längeneinheiten: Absolute vs. Relative
Absolute Einheiten
Absolute Einheiten haben eine feste Größe unabhängig von anderen Elementen:
- px (Pixel): Basis-Einheit für Bildschirme, 1px = 1/96 inch bei 96 DPI
- pt (Point): Druckeinheit, 1pt = 1/72 inch = 1,333px (bei 96 DPI)
- pc (Pica): 1pc = 12pt = 16px
- in (Inch): 1in = 96px = 72pt
- cm (Zentimeter): 1cm = 37,795px
- mm (Millimeter): 1mm = 3,78px
Relative Einheiten
Relative Einheiten beziehen sich auf andere Eigenschaften oder Elemente:
- em: Relativ zur Schriftgröße des Elternelements
- rem: Relativ zur Schriftgröße des Root-Elements (<html>)
- ex: Höhe des Buchstabens 'x' in der aktuellen Schrift
- ch: Breite des Buchstabens '0' in der aktuellen Schrift
- %: Prozentual zur Eigenschaft des Elternelements
Viewport-basierte Einheiten
Diese Einheiten beziehen sich auf die Größe des Browserfensters:
- vw (Viewport Width): 1% der Viewport-Breite
- vh (Viewport Height): 1% der Viewport-Höhe
- vmin: 1% der kleineren Dimension (min(vw, vh))
- vmax: 1% der größeren Dimension (max(vw, vh))
Umrechnungsformeln zwischen Einheiten
Pixel zu rem
rem = px ÷ root-font-size
Bei Standard-Browser-Einstellung (16px):
24px ÷ 16 = 1.5rem
12px ÷ 16 = 0.75rem
18px ÷ 16 = 1.125rem
Pixel zu em
em = px ÷ parent-font-size
Wenn das Elternelement 20px hat:
30px ÷ 20px = 1.5em
10px ÷ 20px = 0.5em
Pixel zu pt
pt = px × 0.75 (bei 96 DPI)
16px × 0.75 = 12pt
24px × 0.75 = 18pt
Viewport-Einheiten
vw = (px ÷ viewport-width) × 100
Bei 1920px Viewport-Breite:
19.2px entspricht 1vw
96px entspricht 5vw
Browser-Standards und Standardwerte
Default-Schriftgrößen
Moderne Browser verwenden folgende Standardwerte:
- Root-Element (html): 16px (100%)
- Body-Element: Erbt vom Root (16px)
- h1: 2em (32px bei 16px Root)
- h2: 1.5em (24px bei 16px Root)
- h3: 1.17em (18.72px bei 16px Root)
- h4: 1em (16px bei 16px Root)
- h5: 0.83em (13.28px bei 16px Root)
- h6: 0.67em (10.72px bei 16px Root)
Accessibility-Einstellungen
Benutzer können Browser-Schriftgrößen ändern:
- Sehr klein: 9px Root
- Klein: 12px Root
- Mittel (Standard): 16px Root
- Groß: 20px Root
- Sehr groß: 24px Root
rem-basierte Designs skalieren automatisch mit diesen Einstellungen.
Responsive Typography Strategien
Fluid Typography mit clamp()
CSS clamp() ermöglicht flexible Schriftgrößen mit Minimum und Maximum:
font-size: clamp(min-size, preferred-size, max-size);
Praktische Beispiele:
font-size: clamp(1rem, 4vw, 2rem);
font-size: clamp(14px, 2.5vw, 28px);
Media Query Breakpoints
Stufenweise Anpassung für verschiedene Bildschirmgrößen:
- Mobile (320-480px): 14-16px Base
- Tablet (768-1024px): 16px Base
- Desktop (1200px+): 16-18px Base
- Large Desktop (1600px+): 18-20px Base
Typografische Skalen und Harmonien
Klassische Typografie-Skalen
Mathematisch fundierte Größenverhältnisse für harmonische Hierarchien:
Major Second (1.125):
12px → 13.5px → 15.18px → 17.08px → 19.2px
Minor Third (1.2):
12px → 14.4px → 17.28px → 20.74px → 24.88px
Major Third (1.25):
12px → 15px → 18.75px → 23.44px → 29.3px
Perfect Fourth (1.333):
12px → 16px → 21.33px → 28.44px → 37.93px
Golden Ratio (1.618):
12px → 19.42px → 31.42px → 50.83px → 82.25px
Modular Scale Implementation
CSS Custom Properties für skalierbare Typografie:
:root {
--ratio: 1.25;
--s-2: calc(var(--s-1) / var(--ratio));
--s-1: calc(var(--s0) / var(--ratio));
--s0: 1rem;
--s1: calc(var(--s0) * var(--ratio));
--s2: calc(var(--s1) * var(--ratio));
}
Print vs. Screen Typography
Print-optimierte Größen
Druckmedien erfordern andere Größen als Bildschirme:
- Fließtext: 9-12pt (12-16px)
- Überschriften: 14-24pt (18.67-32px)
- Fußnoten: 7-9pt (9.33-12px)
- Bildunterschriften: 8-10pt (10.67-13.33px)
CSS Print Media Query:
@media print {
body { font-size: 12pt; }
h1 { font-size: 18pt; }
}
DPI und Auflösungsunterschiede
- Standard-Bildschirme: 96 DPI
- Retina-Displays: 192-326 DPI (CSS Pixel bleiben gleich)
- Drucker: 300-1200 DPI
- CSS Pixel: Abstrakte Einheit, nicht 1:1 Hardware-Pixel
Barrierefreiheit und WCAG-Richtlinien
Mindestanforderungen für Schriftgrößen
Web Content Accessibility Guidelines (WCAG) 2.1:
- AA-Level: Text muss auf 200% zoombar sein ohne horizontales Scrollen
- AAA-Level: Text sollte ohne assistive Technologien lesbar sein
- Mindestgröße: Keine absolute Mindestgröße, aber ~16px empfohlen
- Relative Einheiten: Verwenden Sie rem/em statt px für bessere Skalierung
User Zoom und Browser-Einstellungen
Respektierung von Benutzer-Präferenzen:
- font-size: medium: Respektiert Browser-Einstellungen
- rem-basierte Größen: Skalieren mit Benutzer-Einstellungen
- max-width in ch: Lesbare Zeilenlängen (45-75 Zeichen)
Performance und Rendering-Optimierung
Font Loading und FOUT/FOIT
Vermeidung von Layout-Sprüngen bei Web-Font-Loading:
- FOUT (Flash of Unstyled Text): System-Font wird zuerst angezeigt
- FOIT (Flash of Invisible Text): Text ist unsichtbar bis Font geladen
- font-display: swap: FOUT bevorzugen für bessere Performance
- Size-Adjust: Fallback-Fonts an Web-Font anpassen
CSS Font Metrics Matching
@font-face {
font-family: 'MyFont';
font-display: swap;
size-adjust: 100.06%;
}
Internationale Typografie
Sprachspezifische Anforderungen
- CJK-Sprachen: Größere Schriftgrößen nötig (18-20px Minimum)
- Arabisch: Vertikale Metriken berücksichtigen
- Thailändisch: Höhere Zeilenhöhe für diakritische Zeichen
- Deutsche Sprache: Längere Wörter → Anpassung der Zeilenlänge
CSS-Funktionen für dynamische Schriftgrößen
calc() für komplexe Berechnungen
Kombination verschiedener Einheiten:
font-size: calc(1rem + 0.5vw);
font-size: calc(100% + 0.25em);
font-size: calc(16px + 1vw);
CSS Custom Properties für Konsistenz
:root {
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
}
Debugging und Entwickler-Tools
Browser DevTools für Schriftgrößen
- Computed Styles: Finale berechnete Pixelwerte sehen
- Font Inspector: Verwendete Fonts und Metriken analysieren
- Responsive Modus: Verschiedene Bildschirmgrößen testen
- Accessibility Panel: Kontrastwerte und Lesbarkeit prüfen
Testing verschiedener Einstellungen
- Browser-Zoom: 50%-300% testen
- OS-Schriftgrößen: Systemeinstellungen ändern
- Verschiedene Bildschirmgrößen
- High-DPI vs. Standard-Displays
Best Practices für Schriftgrößen
Empfohlene Workflows
- Base-Size definieren: 16px (1rem) als Ausgangspunkt
- Typografische Skala wählen: 1.2-1.414 für Web-Projekte
- Relative Einheiten verwenden: rem für Komponenten, em für lokale Anpassungen
- Responsive Breakpoints: Größenanpassungen für verschiedene Geräte
- Testing: Verschiedene Browser und Einstellungen testen
Häufige Fehler vermeiden
- Ausschließlich px verwenden: Verhindert Benutzerskalierung
- em-Nesting: Kann zu unvorhersagbaren Größen führen
- Viewport-Einheiten für Body-Text: Kann zu unlesbaren Größen führen
- Zu kleine Grundgrößen: Unter 16px erschwert Lesbarkeit
Unser Schriftgrößen-Rechner unterstützt Sie bei der präzisen Umrechnung zwischen CSS-Einheiten und hilft beim Aufbau konsistenter, responsiver Typografie-Systeme. Nutzen Sie die Vorschaufunktion, um die Auswirkungen verschiedener Größen direkt zu sehen.