jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-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 font units (Baseline 2026: Chrome 131+, Safari 18.2+, Firefox 136+) give developers access to specific glyph measurements of the root element font. rcap equals the cap height (the height of uppercase letters), rch equals the character width (the advance measure of the 0 glyph), rex equals the x-height (height of lowercase letters like x), and ric equals the ideograph width (typically 1em in CJK fonts). Unlike rem which is simply the root font-size and tells you nothing about the font actual glyph proportions, these units expose the true metrics of the typeface in use.

Kurze Antwort

rcap (cap height), rch (character width), rex (x-height), and ric (ideograph width) are root-relative font units that reference specific glyph measurements of the root element font, unlike rem which only reflects font-size. Their pixel values vary by font family. Use rcap for cap-height alignment, rex for vertical rhythm, rch for character-width sizing, and ric for CJK text. Chrome 131+, Safari 18.2+, Firefox 136+ (Baseline 2026).

Einschränkungen

  • These units reference the root element font, not the element they are applied to. For element-relative glyph measurements, dedicated font-relative units like cap, ch, ex, and ic exist but are also not universally supported. There is no way to reference a specific element own cap height using a unit alone.
  • rch measures the width of the zero glyph, which may not represent the average character width for your specific text content. For fields with mixed character widths (like addresses), a width set in rch may overflow for wide characters or leave excess space for narrow ones.
  • ric equals 1em in non-CJK fonts, making it redundant with rem for Latin text. The value of ric only differs from rem when the root font includes ideographic glyph metrics, which primarily applies to Chinese, Japanese, and Korean fonts.

So nutzt du dieses Tool

  1. Enter the root font family and size to see the calculated pixel equivalents for rcap, rch, rex, and ric based on the font actual glyph measurements.
  2. Compare each unit against rem to see the ratio. A font with a large x-height will have a rex value close to rem, while a font with small lowercase letters will have a smaller rex.
  3. Select a use case from the presets to find the recommended unit -- cap height for alignment, x-height for vertical rhythm, character width for input sizing.
  4. Copy the generated CSS with the selected unit applied to your chosen property, including a rem fallback declaration.

Wofür du es nutzen kannst

  • Align the height of decorative initial caps or drop caps to exactly match the cap height of the surrounding text using rcap, avoiding overshoot or gaps.
  • Size form input fields and monospace code blocks based on actual character width (rch) so that a maxlength of 40 fits exactly within the field width.
  • Set vertical spacing (margin, padding) on text elements using rex for vertical rhythm that scales proportionally to the font x-height across different typefaces.

Anwendungsfalle

Praxisbeispiele

Beispiel

Drop cap aligned to cap height

A magazine article uses a large initial drop cap. Instead of guessing a font-size that visually aligns, use height: 4rcap to set the drop cap height exactly to 4 times the cap height of the root font. The drop cap aligns perfectly with the uppercase starting word regardless of the typeface.

Beispiel

Input field sized to character width

A form has a phone number field with maxlength="10". Set width: 12rch to create an input field that fits slightly more than 10 characters of the current font. The field shrinks or grows with the font rather than being a fixed pixel width, adapting to user font preferences.

Haufige Fehler

  • Assuming rcap and rex are the same as the element own font metrics -- these units always reference the root element font, not the element they are applied to. For element-relative cap height, use the cap unit (not yet widely supported). rcap is always relative to the html element font.
  • Using ric outside of CJK contexts without understanding it equals 1em in non-CJK fonts -- the ideograph width (ric) is meaningful for Chinese, Japanese, and Korean text where characters are typically square-width. For Latin text, ric behaves identically to rem, providing no advantage over the simpler unit.
  • Forgetting that rch is based on the zero glyph (0) width -- it does not represent the average character width or the width of the letter w. For approximate average character width, multiply rch by a font-specific ratio such as 0.5 for condensed fonts or 0.6 for wide fonts.

Überprüfung

  1. In Chrome 131+, inspect a styled element using rcap or rex and verify the computed pixel value matches the expected glyph measurement of the root font family. Change the root font-family and confirm the computed pixel value changes accordingly.
  2. Compare the same declaration with rem by swapping the unit -- for example, compare height: 2rcap vs height: 2rem on a drop cap. The rcap value should produce a smaller height that matches the actual uppercase letter proportions, while rem includes descender space.

FAQ

Fragen zu CSS Root-Relative Font Units Rechner

How does rcap differ from using em or rem for cap-height alignment?

em and rem are based on the font-size, which is the distance from the top of the em-box to the bottom. Cap height is usually smaller than the font-size -- for many typefaces, the cap height is about 70% of the font-size. Using height: 1em on a drop cap creates more visual height than 1rcap because em includes descender space. rcap gives you the actual uppercase letter height, which is what you want for precise alignment.

Why does the pixel value of rcap or rex change when I change the font family at the same font-size?

rcap, rex, rch, and ric measure actual glyph metrics of the root font. Different typefaces have different proportions even at the same font-size. A typeface like Helvetica has a larger x-height than Garamond, so rex will be a larger pixel value for Helvetica. This is the entire point of these units -- they expose the true typographic measurements of the font in use, unlike rem which only reflects the font-size setting.

Can I use rcap and rex for responsive typography with clamp()?

Yes. These units work in any CSS length context including clamp(), min(), max(), and calc(). For example, font-size: clamp(1rex, 2vw + 1rex, 2rex) creates responsive text that scales with viewport width while maintaining x-height proportion. This gives you fluid typography that responds to both viewport size and font metrics simultaneously.

What happens in browsers that do not support rcap, rch, rex, or ric?

These units are Baseline 2026 (Chrome 131+, Safari 18.2+, Firefox 136+). In unsupported browsers, the declaration containing the unit is ignored entirely, not partially applied. Always provide a rem or px fallback before the rcap/rch/rex/ric declaration so the fallback applies in older browsers and the more precise unit takes over in supporting browsers.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren