Conversor de Unidades CSS

Dos familias de unidades

Toda longitud de CSS pertenece a una de dos familias. Las unidades absolutas, como px, pt, cm, mm e in, describen un tamaño físico o de dispositivo fijo que no cambia con el contexto. Las unidades relativas, como em, rem, porcentaje, vw, vh, ch y ex, describen un tamaño en función de otra cosa, normalmente un tamaño de fuente o la ventana gráfica. Todo el arte del CSS responsive y accesible se reduce a elegir la familia correcta para cada tarea, y este conversor existe para traducir limpiamente entre ambas.

La línea divisoria importa porque las unidades absolutas congelan un valor mientras que las relativas le permiten adaptarse. Un titular definido en píxeles mantiene el mismo tamaño sin importar cómo haya configurado el usuario su navegador, mientras que el mismo titular en rem crece cuando aquel aumenta su tamaño de texto predeterminado. Uno de esos comportamientos es amigable; el otro excluye a la gente de forma silenciosa.

El píxel y la base de 16px

El px es el punto de referencia de casi todas las conversiones. A pesar del nombre, un píxel de CSS no siempre es un único punto físico de la pantalla; en las pantallas de alta densidad el navegador lo asigna a varios puntos del dispositivo para que una palabra de 16px se mantenga en un tamaño de lectura cómodo, y por eso px cuenta como absoluto aunque el hardware varíe. La mayoría de las conversiones de esta herramienta dependen de un solo número, el tamaño de fuente raíz, que tiene un valor predeterminado de 16px porque ese es el tamaño que los navegadores aplican al elemento html de fábrica. Cambia esa base en los Ajustes avanzados y cada resultado en rem y em se recalculará con respecto a ella.

em frente a rem: la diferencia de la cascada

Esta es la distinción que hace tropezar a más desarrolladores. Un rem es siempre relativo al tamaño de fuente raíz, así que 1.5rem es la misma longitud en cualquier lugar del documento, predecible y plana. Un em es relativo al tamaño de fuente del elemento en el que se encuentra, lo que significa que los em se acumulan. Si un elemento de lista está definido en 1.2em y su padre también está en 1.2em, el hijo es 1.2 por 1.2 del abuelo, y el anidamiento puede hacer crecer tu texto de forma silenciosa hasta tamaños sorprendentes.

Esa acumulación es a veces justo lo que quieres. El relleno o el margen expresados en em escalan con el propio texto del elemento, de modo que un botón mantiene un relleno proporcional a medida que crece su etiqueta. Pero para la escala tipográfica global, rem suele ser el valor predeterminado más seguro precisamente porque no se acumula. Este conversor te permite establecer el tamaño de fuente raíz y el tamaño de fuente del elemento padre por separado, de modo que el resultado en rem y el resultado en em reflejen esa diferencia exacta.

Unidades de ventana gráfica para diseños fluidos

Las unidades de ventana gráfica miden con respecto al tamaño de la ventana misma. 1vw es el uno por ciento del ancho de la ventana gráfica y 1vh es el uno por ciento de su alto, así que 50vw siempre equivale a la mitad del ancho de la ventana sin importar los ajustes de fuente. Son la columna vertebral de los diseños fluidos y de los grandes titulares de pantalla que deben escalar con la pantalla en lugar de con el tamaño del texto.

Sin embargo, úsalas con cuidado. Dimensionar el texto del cuerpo únicamente en vw significa que el texto se encoge hasta resultar ilegible en un teléfono estrecho y se infla en un monitor ancho, y en algunas configuraciones puede ignorar el zoom del usuario. El remedio moderno es la función clamp, que toma un mínimo, un valor fluido preferido y un máximo, permitiendo que un titular crezca con la ventana gráfica pero sin caer nunca por debajo de un piso ni superar un techo. Convierte aquí tu piso y tu techo a rem para que sigan respetando los ajustes de fuente del usuario.

Porcentaje, ch y ex

El porcentaje es relativo, pero a qué depende de la propiedad. Para el ancho es un porcentaje del ancho del bloque contenedor; para font-size es un porcentaje del tamaño de fuente del padre, lo que hace que se comporte de forma muy parecida a em en la tipografía. Esa sensibilidad al contexto es la razón por la que esta herramienta pide un tamaño de fuente del elemento padre cuando conviertes porcentajes de tamaño de fuente. Hay otras dos unidades relativas a la fuente fáciles de pasar por alto: ch es el ancho del dígito cero en la fuente actual, perfecto para limitar un párrafo a una medida de lectura cómoda de unos 60ch, mientras que ex es la altura de una x minúscula, útil para ajustes verticales ligados a las proporciones del tipo de letra.

Unidades absolutas de impresión: pt, in, cm, mm

Las unidades físicas se rigen por proporciones exactas en la especificación de CSS, y por eso las conversiones de aquí no son aproximaciones. Una pulgada equivale a 96px, un punto es un setenta y dosavo de pulgada, de modo que resulta ser uno y un tercio de píxeles, un centímetro es aproximadamente 37.8px, y un milímetro es la décima parte de eso. Estas proporciones son fijas con independencia de la pantalla real.

En pantalla, estas unidades son en su mayoría una trampa, porque un centímetro en la página rara vez coincide con un centímetro de una regla apoyada en el monitor. Su verdadero hogar son las hojas de estilos de impresión, donde una hoja física de papel les da un significado genuino, y pt en particular sigue siendo la forma convencional en que los diseñadores y los procesadores de texto describen los tamaños de la tipografía. Recurre a pt, cm y mm cuando estés diseñando para impresión, y recurre a rem, em y las unidades de ventana gráfica cuando estés diseñando para pantallas.

Accesibilidad: por qué las fuentes en px son un problema

Cuando estableces los tamaños de fuente en px, los dejas fijos. Un usuario que aumenta el tamaño de texto predeterminado de su navegador, a menudo porque lo necesita, no ve ningún cambio, porque un valor fijo en píxeles ignora por completo esa preferencia. Dimensionar el texto en rem, en cambio, significa que escala con el tamaño de fuente raíz que el usuario ha elegido, lo que constituye una de las mejoras de accesibilidad de mayor impacto disponibles en CSS y no te cuesta nada a nivel visual para el lector predeterminado.

De esto se deriva un flujo de trabajo práctico: diseña en píxeles porque son intuitivos, y luego convierte tu tipografía y tu espaciado a rem antes de publicar, de modo que el diseño respete los ajustes del usuario. Esa es la conversión más común que realiza esta herramienta, y con la base predeterminada de 16px la aritmética es amigable, ya que 16px es 1rem, 24px es 1.5rem y 8px es 0.5rem.