Medidas en CSS

Varias son las unidades de medidas que se pueden utilizar en CSS para definir tamaños a elementos y texto. Durante años para tipografías utilizo pixeles, ya que me parecía tener más control en cuanto a cómo lo despliegan los browsers (salvo IE6 que siempre es diferente del resto). Pero últimamente le he tomado el gusto a em, y he podido controlarlo.

A nuestra disposición, la W3C puso las siguientes unidades de medidas:

Absolutas⌗

• in (pulgadas)
• cm (centímetros)
• mm (milímetros)
• pt (puntos)
• pc (picas)
• px (pixeles)

Las unidades absolutas permiten un contro exacto de la apariencia de la página, siempre y cuando se visualice en el entorno para la cual fue diseñada. A modo de ejemplo, al utilizar px se visualizará diferente en cada resolución de pantalla y la plataforma del usuario que está desplegando ese contenido. Peor si utilizamos pt, ya que depende del tamaño del punto de la resolución de la pantalla.

Relativas⌗

• em
• ex

Las unidades relativas dependen de la altura del elemento en el que se usa, aunque en la práctica, es el tamaño de texto definido en las preferencias del browser. Con esto, quien está definiendo estilos mantiene un control relativo ya que depende directamente del tamaño de fuente por defecto del usuario (1em), y a partir de eso, cuanto más grande (1.2em por ej) o menor (0.7em) se visualizará esa letra. Además, permiten su uso en cualquier propiedad de medida (margin, padding) lo que finalmente muestra un diseño proporcionado a la configuración del usuario (por ejemplo, proporcionado entre una pantalla widescreen de 17" y un iPhone).

Porcentaje⌗

• %

No recomendado para tipografías, ya que su control no es fácilmente determinado por quien construye los estilos ya que necesita de un elemento de referencia (100%). Sólo recomiendo su uso en cajas de layout, determinados por el ancho de la resolución del usuario.

Tabla de equivalencias⌗

<th scope="col" style="width: 25%">
  Pixeles
</th>

<th scope="col" style="width: 25%">
  Em
</th>

<th scope="col" style="width: 25%">
  %
</th>

<td>
  8px
</td>

<td>
  0.5em
</td>

<td>
  50%
</td>

<td>
  9px
</td>

<td>
  0.55em
</td>

<td>
  55%
</td>

<td>
  10px
</td>

<td>
  0.625em
</td>

<td>
  62.5%
</td>

<td>
  11px
</td>

<td>
  0.7em
</td>

<td>
  70%
</td>

<td>
  12px
</td>

<td>
  0.75em
</td>

<td>
  75%
</td>

<td>
  13px
</td>

<td>
  0.8em
</td>

<td>
  80%
</td>

<td>
  14px
</td>

<td>
  0.875em
</td>

<td>
  87.5%
</td>

<td>
  15px
</td>

<td>
  0.95em
</td>

<td>
  95%
</td>

<td>
  16px
</td>

<td>
  1em
</td>

<td>
  100%
</td>

<td>
  17px
</td>

<td>
  1.05em
</td>

<td>
  105%
</td>

<td>
  18px
</td>

<td>
  1.125em
</td>

<td>
  112.5%
</td>

<td>
  19px
</td>

<td>
  1.2em
</td>

<td>
  120%
</td>

<td>
  20px
</td>

<td>
  1.25em
</td>

<td>
  125%
</td>

<td>
  21px
</td>

<td>
  1.3em
</td>

<td>
  130%
</td>

<td>
  22px
</td>

<td>
  1.4em
</td>

<td>
  140%
</td>

<td>
  23px
</td>

<td>
  1.45em
</td>

<td>
  145%
</td>

<td>
  24px
</td>

<td>
  1.5em
</td>

<td>
  150%
</td>

<td>
  26px
</td>

<td>
  1.6em
</td>

<td>
  160%
</td>

<td>
  29px
</td>

<td>
  1.8em
</td>

<td>
  180%
</td>

<td>
  32px
</td>

<td>
  2em
</td>

<td>
  200%
</td>