En CSS disponemos de una gran variedad de unidades de medida con las que podremos trabajar cuando estemos desarrollando o modificando un sitio web.
Unidades Absolutas
- in (pulgadas)
- cm (centímetros)
- mm (milímetros)
- pt (puntos)
- pc (picas)
- px (pixeles)
Unidades Relativas
- em
- ex
Unidades Porcentuales
- %
Es importante tener en cuenta que, al utilizar unidades de longitud absolutas como los pixeles, los centímetros, los puntos y demás, tendremos la posibilidad de indicar el tamaño exacto con el que queremos trabajar, pero, este tamaño varia de dispositivo a dispositivo ya que la configuración de pixeles por pulgada en cada uno de los dispositivos en los que se visualizara la pagina variará, es por esta razón que muchas veces es aconsejable hacer uso de las unidades relativas, ya que con estas se tendrá un control relativo al tamaño del entorno en donde se mostrara el objeto al que se le apliquen los estilos correspondientes.
La siguiente tabla la he copiado de Reeddesign y muestra las equivalencias aproximadas entre unidades de medida:
| 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% |