Diseño web: Tabla de conversión y correspondencia píxeles, em, puntos y porcentajes

Trabajando en una página web para móviles responsive multidispositivo, necesitábamos una tabla de correspondencia entre varias unidades utilizadas en diseño web frontend: píxeles, puntos, em y porcentajes, ya que estamos haciendo traslado de una página web de html a html5 y ya de paso haciéndolo responsive o adaptativo a cualquier dispositivo, smartphones o tablets… o cualquier otro tipo de pantalla.

Conversión píxeles a em

Para hacer esta conversión habitual en diseñadores web, sobre todo con webs adaptativas o responsive, hemos buscado una tabla de correspondencia, ya que la página web que estamos rehaciendo está muy mal construida, el cliente nos ha pidió en su diseño web nuevo que reproduzcamos varias zonas de forma idéntica, pero con las nuevas técnicas de diseño de páginas web responsive actuales y necesitamos utilizar varias unidades de medida para convertirlas todas a responsive o medidas relativas… así que aquí la compartimos con vosotros y ya de paso las dejamos como referencia para nosotros, recordad que es aproximado, 1em suele valer 16 pixeles normalmente ya que es la medida para páginas web mas estándar y si buscamos un tamaño que permita la lectura, 16 píxeles es una buena medida para nuestras páginas web, pero esto puede cambiar, ya que estamos hablando de igualar medidas absolutas con relativas y esto no es exacto, así que contad con que son correspondencias lo más aproximadas posibles, una vez aplicada la referencia de estas tablas, fijaros en como reaccionan vuestros diseños web y los vais ajustando, el ojo profesional de años maquetando nunca falla.

Tablas de correspondencia píxel, em, puntos y porcentaje.

Ahora si, os dejamos las tablas de correspondencia, para estas cuatro medidas relativas y absolutas, os ayudará en vuestros proyectos. En ellas podéis ver cualquier correspondencia entre medidas y pasar rápido vuestros píxeles, porcentajes, puntos o ems de una medida a otra. Verdaderamente útiles.