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:
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 absolutas
- 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 delusuario, 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% |
