Uno de los elementos más importantes del diseño web son las medidas porque tiene un gran efecto en la accesibilidad de un sitio web.
En CSS el valor de una propiedad, tal cómo font-size, se puede expresar en unidades de longitud o en unidades de porcentaje. veamos las unidades que tenemos disponibles:

  • Unidades de longitud
    • Unidades absolutas
      • in (pulgadas)
      • cm (centímetros)
      • mm (milímetros)
      • pt (puntos)
      • pc (picas)
      • px (pixeles)
    • Unidades relativas
      • em
      • ex
  • Unidades de porcentaje
    • %

La mejor es em

De todas estas unidades la que yo les recomiendo son las relativas en especial em anteriormente la unidad em era el equivalente a la altura de la M mayúscula. Sin embargo actualmente es igual a la altura de la letra del elemento en el que se usa. Con este tipo de medidas el autor mantiene un control relativo ya que, en relación con el tamaño de fuente por defecto del usuario, puede especificar cuanto mas grande o mas pequeña se ha de visualizar la letra de la página. Ademas la unidad em puede utilizarse para cualquier propiedad CSS que admita medidas (márgenes, sangrías…) lo que permite un diseño proporcionado al sistema del usuario.

¿Por qué no utilizar unidades absolutas?

Las unidades absolutas como px (pixeles), cm (centímetros), pt (puntos), permiten un control exacto de la apariencia de la página, siempre y cuando, claro está, que esta se visualice en el entorno preciso para el que fue diseñada (lo cuál le quita accesibilidad a la página). Por ejemplo, la unidad px tiene un valor diferente dependiendo de la resolución de la pantalla y el tipo de computadora del usuario. Así, normalmente un sistema operativo Windows mantiene una equivalencia de 96px por pulgada, y un Macintosh 72px por pulgada. Si utilizamos pt (puntos) en lugar de px (pixeles) el tamaño del punto depende de la resolución de la pantalla del usuario.

Ejemplos de unidades de medida

Utilizando em Texto normal: 3em, 2em,1em. Utilizando ex Texto normal: 3ex, 2ex,1ex. Utilizando px Texto normal: 20px, 15px,10px. Utilizando in Texto normal: 1in, 0.5in. Utilizando cm Texto normal: 2cm, 1cm. Utilizando mm Texto normal: 20mm, 10mm. Utilizando pt Texto normal: 18pt, 12pt. Utilizando pc Texto normal: 5pc, 3pc. Para finalizar les dejo una tabla de equivalencias. que encontré en ReedDesign, las equivalencias son una aproximación, todo depende del navegador utilizado y el sistema operativo.

Puntos Pixeles Em’s %
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%