En diseño web es habitual tener que realizar la conversión de píxeles a ems, dos unidades de longitud muy usadas pero también bastante diferentes. El píxel es un punto individual en una pantalla, mientras que el em es una unidad relativa escalable, útil sobre todo cuando se trabaja en diseño web responsive.
La unidad de medida em es relativa al tamaño de la fuente del elemento contenedor. Por defecto, los navegadores asignan un valor de 16px al tamaño de la fuente en la raíz del documento. Si la base es de 16px, 2em equivaldrán a 32px; pero si se cambia la base, el resto de valores también cambiarán.
Calculadora
Con esta calculadora en línea podrás convertir los px a em partiendo de un valor base de referencia, que por defecto está establecido en 16 píxeles. Esta calculadora está pensada para desarrolladores web y diseñadores gráficos que buscan una forma rápida de convertir estas unidades de longitud.
Indica los píxeles que quieres convertir a ems y el valor base que quieres usar. A continuación, pulsa el botón «Convertir» para ver el resultado.
Si se quiere utilizar decimales, es preferible usar el punto (.) como separador. En caso contrario, se transformará a punto internamente.
Tabla de conversión
La siguiente tabla de conversión proporciona una referencia que es de gran utilidad a la hora de convertir valores que estén en píxeles a ems y/o porcentajes. En la tabla se incluye la conversión ya realizada para una serie de valores comunes partiendo de los 16 píxeles de base por defecto como valor de referencia.
| Píxeles | EM | Porcentaje |
|---|---|---|
| 1px | 0.0625em | 6.25% |
| 2px | 0.125em | 12.50% |
| 4px | 0.250em | 25.00% |
| 6px | 0.375em | 37.50% |
| 8px | 0.500em | 50.00% |
| 10px | 0.625em | 62.50% |
| 12px | 0.750em | 75.00% |
| 14px | 0.875em | 87.50% |
| 16px | 1.000em | 100.00% |
| 18px | 1.125em | 112.50% |
| 20px | 1.250em | 125.00% |
| 22px | 1.375em | 137.50% |
| 24px | 1.500em | 150.00% |
| 28px | 1.750em | 175.00% |
| 32px | 2.000em | 200.00% |
| 36px | 2.250em | 225.00% |
| 40px | 2.500em | 250.00% |
| 48px | 3.000em | 300.00% |
| 64px | 4.000em | 400.00% |
| 96px | 6.000em | 600.00% |
| 128px | 8.000em | 800.00% |
| 160px | 10.000em | 1000.00% |
Fórmula
Para realizar la conversión de píxeles a ems se necesita conocer el tamaño de la fuente del elemento contenedor (padre), en píxeles. Normalmente este valor está especificado en el elemento raíz del documento HTML. Si no está especificado, se usa el que asigna el navegador web por defecto (16 píxeles).
Entonces, el cálculo es tan simple como dividir los píxeles que se quiere convertir a ems entre el valor base. Por ejemplo, si tenemos 24 píxeles y un valor base de 16 píxeles, realizamos la operación 24px / 16px y obtenemos 1.5em.
De forma inversa, si tenemos 1.5 ems y los queremos convertir a píxeles, es tan simple como multiplicarlos por el valor base. Si en este caso el valor base es de 20 píxeles, multiplicaremos 1.5em × 20px y obtenemos 30px.
Evolución del píxel
Por definición, el píxel es la unidad más pequeña en una pantalla digital. En sus inicios se estableció como un estándar en el ámbito de los gráficos por ordenador. Por ejemplo, una imagen que tenga un ancho de 10 píxeles y un alto de 10 píxeles, estará compuesta por un total de 100 píxeles, formando por tanto una cuadrícula de pequeños puntos de tamaño uniforme, dispuestos en filas y columnas.
Las primeras pantallas de ordenador tenían un tamaño de píxel algo más grande de lo que estamos acostumbrados en la actualidad. Pero con los años, la tecnología de visualización ha mejorado mucho, con lo cual se ha reducido el tamaño d los píxeles, y a la vez ha aumentado la resolución de las pantallas.
En el contexto del diseño web, los píxeles mantienen un tamaño consistente en horizontal y en vertical. Pero sería incorrecto afirmar que se trata de una unidad absoluta, ya que el tamaño del píxel varía en cada dispositivo. Se trata más bien de una unidad de medida híbrida, aunque ofrece consistencia.
Evolución del em
La unidad de medida em se definió en sus inicios como la anchura de la letra «M» (eme mayúscula). Era una unidad relativa muy imprevisible, ya que su tamaño exacto podía variar mucho dependiendo del diseño del tipo de letra.
Pero en la actualidad, en el contexto del lenguaje CSS, la unidad em se refiere al tamaño de la fuente del elemento contenedor (padre). La ventaja de utilizar ems es que permiten un tamaño relativo a partir del valor base. Esto permite realizar diseños más flexibles y escalables, que se ajustan mejor a cualquier dispositivo.
Por ejemplo, si el usuario cambia el tamaño de fuente de su navegador web para mejorar la accesibilidad, el resto de textos se ajustarán en consecuencia, escalándose partiendo del valor base como referencia.
