Conversión entre puntos, píxeles, ems y porcentajes

Esta es una tabla de conversión de unidades para los tamaños de texto más utilizados al diseñar una web. No es perfecta y los valores pueden variar ligeramente según el navegador, sistema operativo, densidad de píxeles de la pantalla… pero es una aproximación suficientemente buena.

Es especialmente útiles en caso como cuando diseñas el mockup de una web con Illustrator o Photoshop (con el texto en puntos) y tienes que convertir los tamaños a otra unidad en la hoja de estilo.

PuntosPíxelsEmsPorcentaje
6pt8px0.5em50%
7pt9px0.55em55%
7.5pt10px0.625em62.5%
8pt11px0.7em70%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1.05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%
17pt23px1.45em145%
18pt24px1.5em150%
20pt26px1.6em160%
22pt29px1.8em180%
24pt32px2em200%
26pt35px2.2em220%
27pt36px2.25em225%
28pt37px2.3em230%
29pt38px2.35em235%
30pt40px2.45em245%
32pt42px2.55em255%
34pt45px2.75em275%
36pt48px3em300%

Foto: Lindlund: A bridge between worlds

Si te ha gustado esta entrada ¡Compártela!