Vas a convertir px a rem, em, puntos y porcentajes de forma rápida, con una tabla de equivalencias y una calculadora sencilla para diseño web CSS.
Índice del artículo web:
Respuesta rápida: si tomamos como referencia habitual una base de 16px, entonces 16px = 1rem = 1em = 12pt = 100%. Por ejemplo, 14px = 0.875rem, 18px = 1.125rem, 24px = 1.5rem y 32px = 2rem.
Esta equivalencia es muy útil para diseño web, maquetación CSS, tipografías responsive y ajustes de tamaño en WordPress, HTML o cualquier proyecto frontend. Eso sí: la referencia de 16px es la más habitual, pero puede cambiar si el tamaño base del navegador, del documento o del elemento padre se ha modificado.
Fórmulas rápidas de conversión CSS:
- px a rem: píxeles ÷ tamaño base = rem
- rem a px: rem × tamaño base = píxeles
- px a em: píxeles ÷ tamaño de fuente del elemento padre = em
- em a px: em × tamaño de fuente del elemento padre = píxeles
- pt a px: puntos × 1.333 = píxeles aproximados
- px a pt: píxeles × 0.75 = puntos aproximados
En esta guía vas a encontrar:
- Una calculadora px, rem, em, pt y porcentaje.
- Una tabla de conversión completa tomando 16px como base.
- La diferencia entre px, rem, em, pt y %.
- Cuándo conviene usar cada unidad en diseño web.
- Ejemplos prácticos para CSS, WordPress y diseño responsive.
Calculadora px, rem, em, pt y porcentaje
Usa esta calculadora para convertir rápidamente entre px, rem, em, puntos y porcentajes. Por defecto utiliza una base de 16px, que es la referencia más habitual en navegadores y proyectos CSS, pero puedes cambiarla si tu diseño utiliza otra base.
Conversor rápido de unidades CSS
Resultado:
- px: 16
- rem: 1
- em: 1
- pt: 12
- %: 100
Tabla de conversión px, rem, em, puntos y porcentaje
En esta tabla usamos una base de 16px. Esto significa que 1rem = 16px y, si el elemento padre también tiene 16px, 1em = 16px. Es una referencia práctica para diseño web, aunque siempre conviene revisar cómo está configurado cada proyecto.
| Pixels | REM | EM | Points | Percent |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 6pt | 50% |
| 9px | 0.5625rem | 0.5625em | 6.75pt | 56.25% |
| 10px | 0.625rem | 0.625em | 7.5pt | 62.5% |
| 11px | 0.6875rem | 0.6875em | 8.25pt | 68.75% |
| 12px | 0.75rem | 0.75em | 9pt | 75% |
| 13px | 0.8125rem | 0.8125em | 9.75pt | 81.25% |
| 14px | 0.875rem | 0.875em | 10.5pt | 87.5% |
| 15px | 0.9375rem | 0.9375em | 11.25pt | 93.75% |
| 16px | 1rem | 1em | 12pt | 100% |
| 17px | 1.0625rem | 1.0625em | 12.75pt | 106.25% |
| 18px | 1.125rem | 1.125em | 13.5pt | 112.5% |
| 19px | 1.1875rem | 1.1875em | 14.25pt | 118.75% |
| 20px | 1.25rem | 1.25em | 15pt | 125% |
| 21px | 1.3125rem | 1.3125em | 15.75pt | 131.25% |
| 22px | 1.375rem | 1.375em | 16.5pt | 137.5% |
| 23px | 1.4375rem | 1.4375em | 17.25pt | 143.75% |
| 24px | 1.5rem | 1.5em | 18pt | 150% |
| 26px | 1.625rem | 1.625em | 19.5pt | 162.5% |
| 28px | 1.75rem | 1.75em | 21pt | 175% |
| 30px | 1.875rem | 1.875em | 22.5pt | 187.5% |
| 32px | 2rem | 2em | 24pt | 200% |
| 36px | 2.25rem | 2.25em | 27pt | 225% |
| 40px | 2.5rem | 2.5em | 30pt | 250% |
| 48px | 3rem | 3em | 36pt | 300% |
| 56px | 3.5rem | 3.5em | 42pt | 350% |
| 64px | 4rem | 4em | 48pt | 400% |
Cómo convertir px a rem
Para convertir px a rem, divide los píxeles entre el tamaño base del documento. En la mayoría de proyectos web se toma como referencia 16px.
Fórmula px a rem: px ÷ 16 = rem
Ejemplo: 24px ÷ 16 = 1.5rem
Algunos ejemplos habituales:
- 12px = 0.75rem
- 14px = 0.875rem
- 16px = 1rem
- 18px = 1.125rem
- 20px = 1.25rem
- 24px = 1.5rem
- 32px = 2rem
El uso de rem es muy cómodo en CSS porque mantiene una referencia común para toda la web. Si defines bien la base, puedes crear una escala tipográfica más ordenada y fácil de mantener.
Cómo convertir rem a px
Para convertir rem a px, multiplica el valor en rem por el tamaño base. Si la base es 16px, entonces 1rem equivale a 16px.
Fórmula rem a px: rem × 16 = px
Ejemplo: 1.25rem × 16 = 20px
Esta conversión es útil cuando revisas un diseño en Figma, Photoshop, CSS o un editor visual y necesitas saber qué tamaño real tendrá un texto o un espaciado.
Diferencia entre px, rem, em, pt y porcentaje
Aunque todas estas unidades sirven para medir tamaños, no funcionan igual. En diseño web moderno conviene entender la diferencia para no mezclar unidades sin criterio.
| Unidad | Qué significa | Cuándo usarla |
|---|---|---|
| px | Unidad fija de píxel CSS. | Útil para bordes, detalles, iconos, ajustes concretos y tamaños muy controlados. |
| rem | Unidad relativa al tamaño de fuente raíz del documento. | Muy útil para tipografía, espaciados y sistemas de diseño coherentes. |
| em | Unidad relativa al tamaño de fuente del elemento padre o del propio elemento según la propiedad. | Útil en componentes, pero puede acumular escalas si hay varios elementos anidados. |
| pt | Puntos tipográficos, más habituales en impresión que en web. | Útiles al adaptar referencias de diseño impreso, pero no suelen ser la mejor unidad para CSS web. |
| % | Unidad relativa a una referencia, normalmente el elemento padre. | Útil para tamaños proporcionales, contenedores, anchuras y algunos ajustes responsive. |
¿Es mejor usar px, rem o em en CSS?
No hay una única respuesta para todos los casos. Lo importante es usar cada unidad donde tiene sentido.
En diseño web actual, una práctica habitual es usar rem para tipografía y espaciados generales, porque mantiene una escala más predecible en toda la web. También se pueden usar px para detalles concretos, como bordes de 1px, sombras, ajustes finos o iconos.
El em sigue siendo útil, pero hay que entender que depende del contexto. Si tienes elementos anidados, un tamaño en em puede multiplicarse y dar resultados inesperados si no estás atento.
Consejo práctico: si estás creando una web nueva, usa una escala clara de tamaños y no mezcles unidades sin sentido. El problema no es usar px, rem o em; el problema es no saber por qué estás usando cada una.
Por qué se usa 16px como base habitual
En muchos navegadores, el tamaño de fuente por defecto suele partir de 16px. Por eso verás tantas tablas de conversión donde 16px = 1rem = 1em = 100%.
Esto no significa que 16px sea una ley universal. Un proyecto CSS puede cambiar la base del documento. Por ejemplo, si el tamaño raíz se modifica en el selector html, las conversiones en rem cambiarán.
Por eso la calculadora de este artículo permite cambiar el tamaño base. Si tu proyecto usa 18px como base, entonces 1rem serán 18px. Si usa 15px, entonces 1rem serán 15px.
Ejemplos prácticos de px a rem en CSS
Imagina que tienes este diseño con medidas en píxeles:
- Título principal: 32px
- Subtítulo: 24px
- Texto normal: 16px
- Texto pequeño: 14px
- Margen entre bloques: 40px
Con una base de 16px, podrías pasarlo a rem así:
| Elemento | Medida en px | Equivalencia en rem | CSS orientativo |
|---|---|---|---|
| Título principal | 32px | 2rem | font-size: 2rem; |
| Subtítulo | 24px | 1.5rem | font-size: 1.5rem; |
| Texto normal | 16px | 1rem | font-size: 1rem; |
| Texto pequeño | 14px | 0.875rem | font-size: 0.875rem; |
| Margen entre bloques | 40px | 2.5rem | margin-bottom: 2.5rem; |
Este tipo de conversión ayuda mucho cuando quieres que una web sea más coherente, más fácil de mantener y más cómoda de adaptar a distintos tamaños de pantalla.
Conversión de puntos a píxeles
Los puntos se usan mucho en diseño gráfico e impresión, pero en CSS web lo más habitual es trabajar con px, rem, em y porcentajes. Aun así, cuando recibes un diseño antiguo o una referencia en puntos, puede venir bien hacer una equivalencia rápida.
Como referencia aproximada:
- 12pt = 16px
- 10.5pt = 14px
- 18pt = 24px
- 24pt = 32px
La fórmula práctica es:
pt a px: pt × 1.333 = px aproximados
px a pt: px × 0.75 = pt aproximados
Cuándo usar porcentajes en diseño web
Los porcentajes son útiles cuando quieres trabajar con relaciones proporcionales. Por ejemplo, un contenedor al 100%, una columna al 50% o una imagen que se adapta al ancho disponible.
En tipografía, los porcentajes también pueden representar escalas respecto al tamaño base. Si 16px es el 100%, entonces 14px es el 87.5% y 24px es el 150%.
Aun así, para tipografía moderna suele ser más cómodo usar rem, porque da una referencia común y más predecible en todo el proyecto.
Diseño responsive y unidades relativas
Hace años era muy habitual maquetar casi todo en píxeles. Hoy seguimos usando píxeles cuando tiene sentido, pero en diseño responsive conviene combinar unidades fijas y relativas con más criterio.
Las unidades como rem, em, %, vw, vh o funciones CSS modernas ayudan a crear interfaces más flexibles. No se trata de abandonar los píxeles, sino de no depender de ellos para todo.
En proyectos de diseño web profesional, este tipo de decisiones afectan a la legibilidad, el mantenimiento del CSS, la adaptación móvil y la consistencia visual de la página.
WordPress, CSS y tamaños de fuente
En WordPress, especialmente si usas constructores visuales o plantillas, puedes encontrar tamaños expresados en px, rem, em o porcentajes. No siempre está todo unificado, y eso puede generar diseños menos consistentes.
Si estás trabajando una web en WordPress, conviene revisar bien la escala tipográfica, los tamaños de párrafo, los encabezados, los botones y los espaciados. Una conversión rápida de px a rem puede ayudarte a ordenar mejor el diseño.
En ideaWeb trabajamos con diseño web WordPress para crear páginas más claras, autogestionables y fáciles de mantener, pero siempre con criterio: no basta con arrastrar módulos; hay que cuidar cómo se construye la web.
Errores habituales al convertir px, rem y em
Al convertir unidades CSS, hay varios errores bastante frecuentes.
Pensar que 1em siempre son 16px
1em no siempre equivale a 16px. Depende del tamaño de fuente del elemento padre o del contexto en el que se aplica. Por eso puede dar sorpresas en elementos anidados.
Pensar que 1rem siempre son 16px
1rem suele equivaler a 16px en muchos proyectos, pero no siempre. Si el tamaño raíz se modifica, la equivalencia cambia.
Usar puntos como si fueran píxeles
Los puntos vienen más del mundo de la impresión. En web puedes convertirlos, pero normalmente es mejor trabajar con unidades CSS más habituales.
Mezclar unidades sin sistema
Una web con tamaños en px, rem, em y porcentajes sin criterio puede volverse difícil de mantener. Lo ideal es definir una escala y respetarla.
No probar en pantalla real
Una tabla ayuda, pero no sustituye la revisión visual. Después de convertir medidas, conviene probar cómo se ve el diseño en móvil, tablet y escritorio.
Preguntas frecuentes sobre px, rem, em, puntos y porcentajes
¿Cuánto es 1rem en px?
Normalmente 1rem equivale a 16px si el tamaño base del documento no se ha modificado. Si el tamaño raíz cambia, la equivalencia también cambia.
¿Cómo convertir px a rem?
Divide los píxeles entre el tamaño base. Si la base es 16px, 24px ÷ 16 = 1.5rem.
¿Cómo convertir rem a px?
Multiplica el valor en rem por el tamaño base. Si la base es 16px, 1.25rem × 16 = 20px.
¿Cuánto es 1em en px?
Depende del tamaño de fuente del elemento padre o del contexto. Si la base del elemento es 16px, 1em equivale a 16px. Si la base es 20px, 1em equivale a 20px.
¿Qué diferencia hay entre em y rem?
rem depende del tamaño raíz del documento, mientras que em depende del tamaño del elemento padre o del propio elemento según la propiedad. Por eso rem suele ser más predecible para escalas globales.
¿Cuántos píxeles son 12pt?
Como referencia práctica, 12pt equivalen aproximadamente a 16px.
¿Qué unidad es mejor para diseño responsive?
Depende del caso. Para tipografía y espaciados globales suele ser cómodo usar rem. Para detalles concretos puede tener sentido usar px. Para proporciones, los porcentajes siguen siendo útiles.
¿Es mejor usar px o rem en WordPress?
En WordPress puedes usar ambas unidades, pero para mantener una escala más coherente suele ser interesante usar rem en tipografía y espaciados generales, y px para detalles concretos.
Qué debes recordar sobre px, rem, em, pt y porcentaje
Si solo necesitas una referencia rápida, quédate con esto: tomando 16px como base, 16px = 1rem = 1em = 12pt = 100%. A partir de ahí, puedes convertir cualquier medida dividiendo o multiplicando por la base.
Para diseño web actual, rem suele ser una unidad muy práctica porque mantiene una escala más estable en todo el proyecto. em puede ser útil en componentes, pero hay que tener cuidado con los elementos anidados. pt pertenece más al mundo de la impresión, aunque sigue siendo útil para convertir referencias antiguas.
Y, como siempre en diseño web, la tabla ayuda, pero el ojo también cuenta. Convierte, prueba y ajusta. En pantalla real es donde se ve si una medida funciona o no.