Equivalencias entre pt, px, em y porcentaje

Útil recurso para los que maquetamos en css, una tabla de equivalencias entre los diferentes tipos de medidas, ya que no siempre se usa la misma, dependiendo el tipo de diagramación que escojamos para el proyecto tendremos que usar unas u otras (o combinaciones entre varias). No todo se soluciona ya que los distintos navegadores las interpretan de formas diferentes pero puede ser una buena ayuda.

PtsPxEmPorcentaje
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%

Visto en webadictos.com.mx

Tabla realizada por Worldtechies

2 Comentarios

  1. Esto es una gran ayuda pero es solo correcto para cuando el navegador está configurado con tamaño de “fuente mediana”. Sí se cambia la configuración del navegador, el tamaño de las fuentes, márgenes y anchos de los elementos varía para los elementos con unidades “em” (elementos en píxeles no se redimensionan) , provocando que el ajuste no sea realmente el deseado.

  2. […] en mi hoja de estilos… Por eso mismo luego de utilizar Google terminé en el artículo “Equivalencias entre pt, px, em y porcentaje” publicado en Diario THC en el cual se compartía la tabla que pueden ver a la […]

Dejar respuesta

Please enter your comment!
Please enter your name here