jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS- & Design-Tools

Kostenlose CSS Root-Relative Font Units Rechner

Berechnen Sie Pixel-Aquivalente fur rcap-, rch-, rex- und ric-Einheiten basierend auf der Root-Schriftgroße. Vergleichen Sie mit rem.

Tool wird geladen...

Was ist CSS Root-Relative Font Units Rechner?

Root-relative Schrifteinheiten (Baseline 2026: Chrome 131+, Safari 18.2+, Firefox 136+) geben Entwicklern Zugriff auf spezifische Glyphenmaße der Root-Element-Schriftart. rcap entspricht der Versalhöhe (Höhe von Großbuchstaben), rch entspricht der Zeichenbreite (dem Voranschreitmaß der 0-Glyphe), rex entspricht der x-Höhe (Höhe von Kleinbuchstaben wie x) und ric entspricht der Ideogrammbreite (typischerweise 1em in CJK-Schriftarten). Anders als rem, das einfach die Root-Schriftgröße ist und nichts über die tatsächlichen Glyphenproportionen der Schriftart aussagt, legen diese Einheiten die wahren Metriken der verwendeten Schriftart offen.

Kurze Antwort

rcap (Versalhöhe), rch (Zeichenbreite), rex (x-Höhe) und ric (Ideogrammbreite) sind root-relative Schrifteinheiten, die spezifische Glyphenmaße der Root-Element-Schriftart referenzieren, anders als rem, das nur die Schriftgröße widerspiegelt. Ihre Pixelwerte variieren je nach Schriftfamilie. Verwenden Sie rcap für Versalhöhen-Ausrichtung, rex für vertikalen Rhythmus, rch für Zeichenbreiten-Bemaßung und ric für CJK-Text. Chrome 131+, Safari 18.2+, Firefox 136+ (Baseline 2026).

Last updated: 2026-06-01

Einschränkungen

  • Diese Einheiten referenzieren die Root-Element-Schriftart, nicht das Element, auf das sie angewendet werden. Für elementrelative Glyphenmaße existieren dedizierte schriftrelative Einheiten wie cap, ch, ex und ic, sind aber ebenfalls nicht universell unterstützt. Es gibt keine Möglichkeit, die eigene Versalhöhe eines bestimmten Elements allein mit einer Einheit zu referenzieren.
  • rch misst die Breite der Null-Glyphe, die möglicherweise nicht die durchschnittliche Zeichenbreite für Ihren spezifischen Textinhalt repräsentiert. Bei Feldern mit gemischten Zeichenbreiten (wie Adressen) kann eine in rch festgelegte Breite für breite Zeichen überlaufen oder für schmale Zeichen überschüssigen Platz lassen.
  • ric entspricht 1em in Nicht-CJK-Schriftarten, was es für lateinischen Text redundant mit rem macht. Der Wert von ric unterscheidet sich nur dann von rem, wenn die Root-Schriftart ideografische Glyphenmetriken enthält, was hauptsächlich für chinesische, japanische und koreanische Schriftarten gilt.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie die Root-Schriftfamilie und -größe ein, um die berechneten Pixel-Äquivalente für rcap, rch, rex und ric basierend auf den tatsächlichen Glyphenmaßen der Schriftart zu sehen.
  2. Vergleichen Sie jede Einheit mit rem, um das Verhältnis zu sehen. Eine Schriftart mit großer x-Höhe hat einen rex-Wert nahe an rem, während eine Schriftart mit kleinen Kleinbuchstaben einen kleineren rex hat.
  3. Wählen Sie einen Anwendungsfall aus den Voreinstellungen, um die empfohlene Einheit zu finden - Versalhöhe für Ausrichtung, x-Höhe für vertikalen Rhythmus, Zeichenbreite für Eingabefeld-Bemaßung.
  4. Kopieren Sie das generierte CSS mit der ausgewählten Einheit, angewendet auf Ihre gewählte Eigenschaft, einschließlich einer rem-Fallback-Deklaration.

Wofür du es nutzen kannst

  • Richten Sie die Höhe von dekorativen Initialen oder Drop Caps exakt an der Versalhöhe des umgebenden Textes mit rcap aus, um Über- oder Unterschreitungen zu vermeiden.
  • Bemaßen Sie Formulareingabefelder und Monospace-Code-Blöcke basierend auf der tatsächlichen Zeichenbreite (rch), sodass eine maxlength von 40 genau in die Feldbreite passt.
  • Setzen Sie vertikale Abstände (margin, padding) auf Textelementen mit rex für vertikalen Rhythmus, der proportional zur x-Höhe der Schriftart über verschiedene Schriftarten hinweg skaliert.

Anwendungsfalle

Praxisbeispiele

Beispiel

Initiale ausgerichtet an der Versalhöhe

Ein Magazinartikel verwendet eine große Anfangsinitiale. Anstatt eine Schriftgröße zu erraten, die visuell passt, verwenden Sie height: 4rcap, um die Höhe der Initiale exakt auf das 4-fache der Versalhöhe der Root-Schriftart zu setzen. Die Initiale richtet sich perfekt am großgeschriebenen Startwort aus, unabhängig von der Schriftart.

Beispiel

Eingabefeld bemessen nach Zeichenbreite

Ein Formular hat ein Telefonnummernfeld mit maxlength='10'. Setzen Sie width: 12rch, um ein Eingabefeld zu erstellen, das etwas mehr als 10 Zeichen der aktuellen Schriftart fasst. Das Feld schrumpft oder wächst mit der Schriftart anstatt eine feste Pixelbreite zu haben und passt sich so den Benutzerschriftarteinstellungen an.

Haufige Fehler

  • Anzunehmen, dass rcap und rex mit den eigenen Schriftmetriken des Elements identisch sind - diese Einheiten referenzieren immer die Root-Element-Schriftart, nicht das Element, auf das sie angewendet werden. Für elementrelative Versalhöhe verwenden Sie die cap-Einheit (noch nicht weit verbreitet). rcap ist immer relativ zur html-Element-Schriftart.
  • ric außerhalb von CJK-Kontexten zu verwenden, ohne zu verstehen, dass es in Nicht-CJK-Schriftarten 1em entspricht - die Ideogrammbreite (ric) ist für chinesische, japanische und koreanische Texte sinnvoll, bei denen Zeichen typischerweise quadratisch breit sind. Für lateinischen Text verhält sich ric identisch zu rem und bietet keinen Vorteil gegenüber der einfacheren Einheit.
  • Zu vergessen, dass rch auf der Breite der Null-Glyphe (0) basiert - es repräsentiert nicht die durchschnittliche Zeichenbreite oder die Breite des Buchstabens w. Für eine ungefähre durchschnittliche Zeichenbreite multiplizieren Sie rch mit einem schriftspezifischen Verhältnis wie 0,5 für kondensierte Schriftarten oder 0,6 für breite Schriftarten.

Überprüfung

  1. Inspizieren Sie in Chrome 131+ ein mit rcap oder rex gestyltes Element und überprüfen Sie, ob der berechnete Pixelwert mit der erwarteten Glyphenmessung der Root-Schriftfamilie übereinstimmt. Ändern Sie die Root-Schriftfamilie und bestätigen Sie, dass sich der berechnete Pixelwert entsprechend ändert.
  2. Vergleichen Sie dieselbe Deklaration mit rem, indem Sie die Einheit austauschen - zum Beispiel vergleichen Sie height: 2rcap vs. height: 2rem bei einer Initiale. Der rcap-Wert sollte eine geringere Höhe erzeugen, die den tatsächlichen Großbuchstaben-Proportionen entspricht, während rem Unterlängenraum einschließt.

FAQ

Fragen zu CSS Root-Relative Font Units Rechner

Wie unterscheidet sich rcap von der Verwendung von em oder rem für die Versalhöhen-Ausrichtung?

em und rem basieren auf der Schriftgröße, die dem Abstand von der Oberkante der em-Box bis zur Unterkante entspricht. Die Versalhöhe ist normalerweise kleiner als die Schriftgröße - bei vielen Schriftarten beträgt die Versalhöhe etwa 70% der Schriftgröße. Die Verwendung von height: 1em bei einer Initiale erzeugt mehr visuelle Höhe als 1rcap, weil em den Unterlängenraum einschließt. rcap gibt Ihnen die tatsächliche Großbuchstabenhöhe, die Sie für präzise Ausrichtung benötigen.

Warum ändert sich der Pixelwert von rcap oder rex, wenn ich die Schriftfamilie bei gleicher Schriftgröße ändere?

rcap, rex, rch und ric messen tatsächliche Glyphenmetriken der Root-Schriftart. Verschiedene Schriftarten haben unterschiedliche Proportionen selbst bei gleicher Schriftgröße. Eine Schriftart wie Helvetica hat eine größere x-Höhe als Garamond, daher wird rex für Helvetica ein größerer Pixelwert sein. Das ist der ganze Sinn dieser Einheiten - sie legen die wahren typografischen Maße der verwendeten Schriftart offen, anders als rem, das nur die Schriftgrößeneinstellung widerspiegelt.

Kann ich rcap und rex für responsive Typografie mit clamp() verwenden?

Ja. Diese Einheiten funktionieren in jedem CSS-Längenkontext einschließlich clamp(), min(), max() und calc(). Zum Beispiel erzeugt font-size: clamp(1rex, 2vw + 1rex, 2rex) responsiven Text, der mit der Viewport-Breite skaliert, während die x-Höhen-Proportion erhalten bleibt. Dies ergibt flüssige Typografie, die gleichzeitig auf Viewport-Größe und Schriftmetriken reagiert.

Was passiert in Browsern, die rcap, rch, rex oder ric nicht unterstützen?

Diese Einheiten sind Baseline 2026 (Chrome 131+, Safari 18.2+, Firefox 136+). In nicht unterstützenden Browsern wird die Deklaration, die die Einheit enthält, vollständig ignoriert, nicht teilweise angewendet. Geben Sie immer einen rem- oder px-Fallback vor der rcap/rch/rex/ric-Deklaration an, damit der Fallback in älteren Browsern greift und die präzisere Einheit in unterstützenden Browsern übernimmt.

Verwandte Tools

Weitere css- & design-tools

CSS- & Design-Tools

CSS-Karussell-Generator

Erstellen Sie natives CSS-Karussell-Markup mit Scroll-Snap, Scroll-Schaltflächen, Scroll-Markierungen und zugänglicher Listenstruktur. Kein JavaScript erforderlich.

Tool öffnen

CSS- & Design-Tools

CSS-Scroll-State-Query-Generator

Erstellen Sie CSS-scroll-state()-Container-Queries für eingerastete, fixierte oder scrollbare Elemente. Enthält einen JavaScript-Fallback für browserübergreifende Unterstützung.

Tool öffnen

Auch ausprobieren

Auch ausprobieren