Unidades CSS

Convierte entre px, rem, em, pt, vw, vh y más, con el tamaño de fuente y el viewport que tú elijas.

Se procesa en tu navegador · Compruébalo Sin envíosDatos enviados: 0 · A otros dominios: 0Analítica: no existe · Anuncios: no existe

Prueba un ejemplo

Valor con unidad

Tamaño de fuente raíz (px)Tamaño de fuente del padre (px)Ancho del viewport (px)Alto del viewport (px)

Por defecto el navegador usa 16 px de fuente raíz; en Tailwind, 1rem = 16px también.

24px = 24px

px24px
rem1.5rem
em1.5em
%150%
pt18pt
pc1.5pc
in0.25in
cm0.635cm
mm6.35mm
Q25.4Q
vw1.25vw
vh2.2222vh
vmin2.2222vmin
vmax1.25vmax

Aprende

¿Qué es?

En CSS el mismo tamaño se puede escribir de muchas formas: 24px, 1.5rem, 18pt… Unas son fijas y otras dependen de la fuente o de la pantalla. Esta herramienta convierte entre todas ellas con los valores de referencia que tú elijas.

¿Para qué sirve?

Pasar un diseño en píxeles (Figma) a rem para respetar el tamaño de texto del usuario.
Calcular cuánto es 5vw en un ancho de pantalla concreto.
Entender por qué un em anidado crece más de lo esperado.
Preparar estilos de impresión con pt, cm o mm.

¿Cómo funciona por dentro?

Todo se pasa primero a píxeles y de ahí a cada unidad. rem multiplica por la fuente raíz: con 16 px, 1.5rem son 24 px. em y % usan la fuente del padre. vw es el 1 % del ancho del viewport: con 1920 px, 10vw son 192 px. Las absolutas tienen equivalencias fijas por estándar: 1in = 96px = 2.54cm, 1pt = 1/72in.

Errores comunes

Fijar font-size en px en la raíz: ignora el ajuste de tamaño de texto del navegador. Mejor rem para tamaños y dejar la raíz en 100 %.
Anidar em: cada nivel multiplica sobre el del padre (1.2em dentro de 1.2em es 1.44 veces).
Creer que 1cm mide un centímetro físico: en pantalla es una equivalencia CSS, no una medida real.
Usar 100vh en móviles: la barra del navegador cambia el viewport; prueba con dvh.

Glosario

px:: Píxel CSS - unidad absoluta; 96 px equivalen a 1 pulgada.
rem:: Múltiplo del tamaño de fuente del elemento raíz (html); por defecto 16 px.
em:: Múltiplo del tamaño de fuente del elemento padre.
Viewport:: El área visible de la página en el navegador.
vw / vh:: 1 % del ancho / alto del viewport.

Para saber más

Más en Diseño web

Aprende paso a paso en la rutaCSS visual para tu web