jquery.app
日本語
EnglishDeutschFrancaisEspanol日本語Nederlands

CSSツール

無料 CSSルート相対フォント単位カリキュレーター

ルートフォントサイズに基づくrcap、rch、rex、ric単位のピクセル換算値を計算します。remとの比較付き。

ツールを読み込み中...

CSSルート相対フォント単位カリキュレーターとは

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.

クイックアンサー

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).

制限事項

  • 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.

使い方

  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.

主な用途

  • 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.

用途

使用例

例

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.

例

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.

よくあるミス

  • 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.

検証

  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

CSSルート相対フォント単位カリキュレーターのFAQ

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.

関連ツール

その他のcssツール

こちらもお試しください

こちらもお試しください