Schriftgrößen-Konverter

• Sofortige Multi-Einheiten-Umrechnung: Der Konverter zeigt beim Tippen sofort die äquivalenten Werte in allen sechs Einheiten – px, em, rem, %, pt und vw. Kein Knopf zu drücken, kein Neuladen der Seite. Jede Einheiten-Karte ist klickbar, sodass Sie von jeder Ausgabeeinheit aus sofort weiterrechnen können.
• Konfigurierbare Basis und Viewport: Legen Sie die Basis-Schriftgröße (Standard 16px) und die Viewport-Breite (Standard 1920px) passend zu Ihrem Projekt fest. Wählen Sie gängige Voreinstellungen oder geben Sie eigene Werte ein. Alle Umrechnungen aktualisieren sich sofort, wenn Sie diese Einstellungen ändern.
• 100 % privat – kein Upload: Alle Schriftgrößen-Umrechnungen erfolgen lokal in Ihrem Browser. Ihre Werte verlassen niemals Ihr Gerät und werden niemals an einen Server gesendet – sicher für proprietäre Designsysteme und Kundenprojekte.
• Kostenlos und ohne Limits: Rechnen Sie unbegrenzt Schriftgrößen um, ohne Anmeldung, ohne Abo und ohne Nutzungsgrenzen. Der Schriftgrößen-Konverter ist dauerhaft völlig kostenlos, ohne Werbung, die die Oberfläche blockiert.

• UI- und Webdesign: UI-Designer nutzen den Konverter, um Schriftgrößen aus Mockups (meist in px aus Figma oder Sketch) in responsive rem- oder em-Einheiten für die Entwicklung zu übersetzen. So werden Designs präzise umgesetzt und bleiben zugänglich und skalierbar.
• CSS-Entwicklung: Frontend-Entwickler nutzen den Konverter, um Pixelwerte aus Design-Spezifikationen in die jeweils passendste CSS-Einheit umzurechnen – rem für globale Typografie, em für komponentenbezogene Größen, vw für fluide Überschriften und pt für Druck-Stylesheets.
• Responsive Typografie: Wer responsive Websites baut, nutzt den Konverter, um fluide Typo-Skalen zu berechnen. Durch Umrechnung zwischen px und vw bei verschiedenen Viewport-Breiten entstehen clamp()-Funktionen, die Text auf allen Bildschirmgrößen weich skalieren.
• Designsystem-Tokens: Verantwortliche für Designsysteme nutzen den Konverter, um konsistente Type-Scale-Tokens zu definieren. Die Umrechnung eines Basissatzes an Pixelwerten in rem, em und Prozent stellt sicher, dass das System in allen CSS-Einheiten-Kontexten funktioniert.
• Barrierefreiheits-Konformität: Accessibility-Spezialisten nutzen den Konverter, um zu prüfen, ob Schriftgrößen die WCAG-Anforderungen erfüllen. Das Verständnis des Verhältnisses von px zu rem hilft sicherzustellen, dass Text die Schriftgrößenpräferenzen der Nutzer respektiert (WCAG 1.4.4, Textgröße ändern).
• Print- und PDF-Design: Print-Designer nutzen den Konverter, um zwischen px (Bildschirm) und pt (Druck) umzurechnen. So lassen sich digitale Designs in der richtigen physischen Größe korrekt drucken.

Ein Schriftgrößen-Konverter rechnet Schriftgrößen zwischen verschiedenen CSS-Einheiten um – px, em, rem, %, pt und vw. Jede Einheit hat andere Eigenschaften und Einsatzbereiche. Unser Tool rechnet jeden Eingabewert gleichzeitig in alle sechs Einheiten um, mit konfigurierbarer Basis-Schriftgröße und Viewport-Breite, passend zum genauen Projektkontext. Alle Umrechnungen erfolgen sofort in Ihrem Browser.

Die Verwendung relativer Einheiten (rem, em, vw) für Schriftgrößen ist eine WCAG-Anforderung zur Barrierefreiheit. Erfolgskriterium 1.4.4 der WCAG 2.1 (Textgröße ändern) verlangt, dass Text bis 200 % vergrößert werden kann, ohne Inhalt oder Funktionalität zu verlieren. Wenn Sie px für Text verwenden, wird die Schriftgrößenpräferenz des Browser-Nutzers ignoriert: Wer den Browser auf 20px Standard einstellt, sieht denselben kleinen Text wie jemand mit 16px.

REM ist in den meisten modernen CSS-Architekturen die empfohlene Einheit für Typografie, weil sie Nutzerpräferenzen respektiert, eine konsistente Größe über die gesamte Seite bietet und globale Schriftgrößenanpassungen so einfach macht wie das Ändern eines einzigen Werts am <html>-Element. Unser Schriftgrößen-Konverter hilft Ihnen, pixelbasierte Design-Spezifikationen in zugängliche, responsive Einheiten zu übersetzen.

1. Wert eingeben: Tippen Sie eine beliebige positive Zahl in das Eingabefeld. Wählen Sie die Einheit (px, em, rem, %, pt oder vw) im Dropdown-Menü. Der Konverter zeigt sofort Ergebnisse in allen sechs Einheiten.
2. Basiseinstellungen konfigurieren: Legen Sie Ihre Basis-Schriftgröße und die Viewport-Breite passend zu Ihrem Projekt fest. Es stehen schnelle Voreinstellungen bereit, oder Sie geben einen eigenen Wert ein. Änderungen an diesen Einstellungen aktualisieren alle Umrechnungen in Echtzeit.
3. Prüfen und kopieren: Jede Einheiten-Karte zeigt den umgerechneten Wert. Klicken Sie auf eine Karte, um diese Einheit zur neuen Eingabe zu machen und weiterzurechnen. Fahren Sie über eine Karte und klicken Sie auf das Kopiersymbol, um den formatierten Wert zu kopieren. Eine CSS-Deklaration steht ebenfalls zum schnellen Einfügen in Ihr Stylesheet bereit.
4. Referenztabelle nutzen: Die Referenztabelle zeigt gängige Pixelwerte, umgerechnet in alle Einheiten mit Ihren Einstellungen – ideal, um Standardgrößen schnell nachzuschlagen.