jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas de CSS y diseño

Gratis Calculadora de unidades CSS root-relative

Calcule equivalentes en pixeles para unidades rcap, rch, rex y ric basadas en el tamano de fuente raiz. Compare con rem.

Cargando herramienta...

Qué es Calculadora de unidades CSS root-relative?

Las unidades de fuente relativas a la raíz (Baseline 2026: Chrome 131+, Safari 18.2+, Firefox 136+) dan a los desarrolladores acceso a medidas específicas de glifos de la fuente del elemento raíz. rcap equivale a la altura de mayúsculas (cap height), rch equivale al ancho de carácter (la medida de avance del glifo 0), rex equivale a la altura-x (x-height, altura de letras minúsculas como x) e ric equivale al ancho de ideograma (típicamente 1em en fuentes CJK). A diferencia de rem, que es simplemente el font-size de la raíz y no informa sobre las proporciones reales de los glifos de la fuente, estas unidades exponen las métricas verdaderas de la tipografía en uso.

Respuesta rápida

rcap (altura de mayúsculas), rch (ancho de carácter), rex (altura-x) y ric (ancho de ideograma) son unidades de fuente relativas a la raíz que referencian medidas específicas de glifos de la fuente del elemento raíz, a diferencia de rem que solo refleja font-size. Sus valores en píxeles varían según la familia tipográfica. Use rcap para alineación de altura de mayúsculas, rex para ritmo vertical, rch para dimensionamiento de ancho de carácter y ric para texto CJK. Chrome 131+, Safari 18.2+, Firefox 136+ (Baseline 2026).

Last updated: 2026-06-01

Limitaciones

  • Estas unidades referencian la fuente del elemento raíz, no el elemento al que se aplican. Para medidas de glifos relativas al elemento, existen unidades dedicadas como cap, ch, ex e ic pero tampoco tienen soporte universal. No hay forma de referenciar la altura de mayúsculas de un elemento específico usando solo una unidad.
  • rch mide el ancho del glifo cero, que puede no representar el ancho de carácter promedio para su contenido de texto específico. Para campos con anchos de carácter mixtos (como direcciones), un ancho establecido en rch puede desbordarse para caracteres anchos o dejar espacio excesivo para caracteres estrechos.
  • ric equivale a 1em en fuentes no CJK, haciéndolo redundante con rem para texto latino. El valor de ric solo difiere de rem cuando la fuente raíz incluye métricas de glifos ideográficos, lo que aplica principalmente a fuentes chinas, japonesas y coreanas.

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

Cómo usar esta herramienta

  1. Ingrese la familia tipográfica raíz y el tamaño para ver los equivalentes en píxeles calculados para rcap, rch, rex y ric basados en las medidas reales de glifos de la fuente.
  2. Compare cada unidad con rem para ver la proporción. Una fuente con altura-x grande tendrá un valor rex cercano a rem, mientras que una fuente con letras minúsculas pequeñas tendrá un rex menor.
  3. Seleccione un caso de uso de los preajustes para encontrar la unidad recomendada: altura de mayúsculas para alineación, altura-x para ritmo vertical, ancho de carácter para dimensionamiento de inputs.
  4. Copie el CSS generado con la unidad seleccionada aplicada a su propiedad elegida, incluyendo una declaración de respaldo rem.

Para qué puedes usarla

  • Alinear la altura de capitulares decorativas o letras capitales para que coincidan exactamente con la altura de mayúsculas del texto circundante usando rcap, evitando sobresaltos o espacios.
  • Dimensionar campos de formulario y bloques de código monoespaciados basándose en el ancho real de carácter (rch) para que un maxlength de 40 quepa exactamente dentro del ancho del campo.
  • Establecer espaciado vertical (margin, padding) en elementos de texto usando rex para un ritmo vertical que escala proporcionalmente a la altura-x de la fuente en diferentes tipografías.

Casos de uso

Ejemplos prácticos

Ejemplo

Letra capital alineada a la altura de mayúsculas

Un artículo de revista usa una letra capital inicial grande. En lugar de adivinar un font-size que se alinee visualmente, use height: 4rcap para establecer la altura de la letra capital exactamente a 4 veces la altura de mayúsculas de la fuente raíz. La letra capital se alinea perfectamente con la palabra inicial en mayúsculas independientemente de la tipografía.

Ejemplo

Campo de entrada dimensionado al ancho de carácter

Un formulario tiene un campo de número de teléfono con maxlength='10'. Establezca width: 12rch para crear un campo de entrada que quepa ligeramente más de 10 caracteres de la fuente actual. El campo se encoge o crece con la fuente en lugar de tener un ancho fijo en píxeles, adaptándose a las preferencias de fuente del usuario.

Errores comunes

  • Asumir que rcap y rex son iguales a las métricas de fuente del propio elemento: estas unidades siempre hacen referencia a la fuente del elemento raíz, no al elemento al que se aplican. Para altura de mayúsculas relativa al elemento, use la unidad cap (aún no ampliamente soportada). rcap siempre es relativa a la fuente del elemento html.
  • Usar ric fuera de contextos CJK sin entender que equivale a 1em en fuentes no CJK: el ancho de ideograma (ric) es significativo para texto chino, japonés y coreano donde los caracteres son típicamente de ancho cuadrado. Para texto latino, ric se comporta idénticamente a rem, sin ventaja sobre la unidad más simple.
  • Olvidar que rch se basa en el ancho del glifo cero (0): no representa el ancho de carácter promedio ni el ancho de la letra w. Para un ancho de carácter promedio aproximado, multiplique rch por una proporción específica de la fuente, como 0.5 para fuentes condensadas o 0.6 para fuentes anchas.

Verificación

  1. En Chrome 131+, inspeccione un elemento estilizado usando rcap o rex y verifique que el valor en píxeles calculado coincida con la medida de glifo esperada de la familia tipográfica raíz. Cambie la familia tipográfica raíz y confirme que el valor calculado en píxeles cambie en consecuencia.
  2. Compare la misma declaración con rem intercambiando la unidad, por ejemplo, compare height: 2rcap vs height: 2rem en una letra capital. El valor rcap debe producir una altura menor que coincida con las proporciones reales de letras mayúsculas, mientras que rem incluye espacio de descendentes.

FAQ

Preguntas sobre Calculadora de unidades CSS root-relative

¿En qué se diferencia rcap de usar em o rem para alineación de altura de mayúsculas?

em y rem se basan en font-size, que es la distancia desde la parte superior del em-box hasta la parte inferior. La altura de mayúsculas suele ser menor que font-size: para muchas tipografías, la altura de mayúsculas es aproximadamente el 70% de font-size. Usar height: 1em en una letra capital crea más altura visual que 1rcap porque em incluye espacio de descendentes. rcap le da la altura real de letras mayúsculas, que es lo que necesita para una alineación precisa.

¿Por qué cambia el valor en píxeles de rcap o rex cuando cambio la familia tipográfica al mismo font-size?

rcap, rex, rch y ric miden métricas reales de glifos de la fuente raíz. Diferentes tipografías tienen proporciones diferentes incluso al mismo font-size. Una tipografía como Helvetica tiene una altura-x mayor que Garamond, por lo que rex será un valor en píxeles mayor para Helvetica. Este es el objetivo de estas unidades: exponen las medidas tipográficas verdaderas de la fuente en uso, a diferencia de rem que solo refleja la configuración de font-size.

¿Puedo usar rcap y rex para tipografía responsive con clamp()?

Sí. Estas unidades funcionan en cualquier contexto de longitud CSS incluyendo clamp(), min(), max() y calc(). Por ejemplo, font-size: clamp(1rex, 2vw + 1rex, 2rex) crea texto responsive que escala con el ancho del viewport mientras mantiene la proporción de altura-x. Esto le da tipografía fluida que responde tanto al tamaño del viewport como a las métricas de la fuente simultáneamente.

¿Qué sucede en navegadores que no soportan rcap, rch, rex o ric?

Estas unidades son Baseline 2026 (Chrome 131+, Safari 18.2+, Firefox 136+). En navegadores no compatibles, la declaración que contiene la unidad se ignora por completo, no se aplica parcialmente. Proporcione siempre un respaldo rem o px antes de la declaración rcap/rch/rex/ric para que el respaldo se aplique en navegadores antiguos y la unidad más precisa tome el control en navegadores compatibles.

Herramientas relacionadas

Más herramientas de css y diseño

Herramientas de CSS y diseño

Generador de carruseles CSS

Genera el marcado de un carrusel CSS nativo con scroll-snap, botones de desplazamiento, marcadores y una estructura de lista accesible. No requiere JavaScript.

Abrir herramienta

Prueba también

Prueba también