¿Diferencia entre rem y em?

rem es relativo a la raíz del documento (html font-size, 16 px por defecto). em es relativo al elemento padre. Coinciden solo cuando el padre usa el tamaño raíz.

¿Por qué 1pt = 1.333px?

CSS define 1 in = 96 px y 1 pt = 1/72 in, así que 1 pt = 96/72 ≈ 1.333 px.

¿vw / vh son exactos?

Usan el ancho y alto del viewport que indicas en el panel de tamaños base. El valor por defecto 1440 × 900 es típico de escritorio; cámbialo según tu canvas.

En tipografía, % equivale al em (relativo al padre). En otras propiedades CSS depende del containing block de esa propiedad.

Conversor de Unidades CSS

Convertir

Escribe un valor en cualquier unidad CSS y mira la conversión instantánea al resto. Personaliza el tamaño de fuente raíz (16 px por defecto) para rem, el tamaño de fuente del padre para em y %, y las dimensiones del viewport para vw y vh. Útil para llevar diseños a Tailwind / CSS, verificar tipografías responsivas o recordar cuántos px son 1rem en una configuración no estándar.

—

ValorUnidad

Tamaños base (raíz, padre, viewport)

Fuente raíz (rem)Fuente padre (em, %)Ancho viewport (vw)Alto viewport (vh)

Todas las unidades

px16.000
rem1
em1
pt12.000
vw1.1111
vh1.7778
%100.00

Cómo usar

Escribe un valor y elige la unidad fuente (px, rem, em, pt, vw, vh, %).
Las demás unidades se actualizan al instante.
Despliega el panel 'tamaños base' para cambiar fuente raíz / padre o viewport.
Copia el valor formateado junto a cada unidad.

Preguntas frecuentes

¿Diferencia entre rem y em?: rem es relativo a la raíz del documento (html font-size, 16 px por defecto). em es relativo al elemento padre. Coinciden solo cuando el padre usa el tamaño raíz.
¿Por qué 1pt = 1.333px?: CSS define 1 in = 96 px y 1 pt = 1/72 in, así que 1 pt = 96/72 ≈ 1.333 px.
¿vw / vh son exactos?: Usan el ancho y alto del viewport que indicas en el panel de tamaños base. El valor por defecto 1440 × 900 es típico de escritorio; cámbialo según tu canvas.
¿Y %?: En tipografía, % equivale al em (relativo al padre). En otras propiedades CSS depende del containing block de esa propiedad.