Recomendaciones acerca del uso de la unidad de medida em [CSS]

Publicado por la100rra en CSS, Desarrollo Web, Google el 06 13th, 2009 | un comentario

Unidades y Medidas

El valor de una propiedad se puede expresar por unidades de longitud. Por ejemplo, los valores de font-size y text-indent.
Las unidades de longitud consisten en un número seguido de una unidad de medida (cm, em, in, pt, px). Hay dos tipos de unidades: absolutas y relativas.

Unidades absolutas:

* pulgadas (in). Una pulgada=2.54 cm
* centímetros (cm)
* milímetros (mm)
* puntos (pt). Un punto=1/72 de pulgada
* picas (pc). Una pica=12 puntos

Unidades relativas:

* em
* ex
* px

La unidad em es igual a la altura (font-size) de la letra del elemento en el que se usa. Por ejemplo si para un párrafo especificamos un indentado de 2em, el largo de la sangría será igual a dos veces el tamaño de la letra de ese párrafo. Cuando empleamos la unidad de medida ‘em’ para especificar el tamaño de la letra (font-size) entonces el valor de ‘em’ viene dado por el tamaño de la fuente del elemento padre.

^?Ver código CSS

1	p { font-size:11px;text-indent: 2em; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit vulputate ipsum, sed sollicitudin ante iaculis vitae. Phasellus sed ante in ligula sollicitudin tempor id eget elit. Donec ornare ligula vitae risus fringilla commodo.

Este ejemplo equivale a un indentado de 22 px para el párrafo a que se aplica

EJEMPLO - 01

^?Ver código CSS

1 2	div { font-size:15px;} p { font-size:1.2em;}

En este ejemplo, si el párrafo está contenido en un elemento div, el tamaño de la letra sería un 20% mayor que el especificado para dicho div. O si no estuviera contenido en un div, un 20% mayor que el tamaño de letra del elemento del que descienda (por ejemplo, body).

EJEMPLO - 02

Recuerda que no hay que dejar espacios en el valor de longitud y la unidad de medida

No es lo mismo expresar las medidas en una unidad u otra. Unidades “absolutas” como pixels, centímetros, puntos, permiten un control exacto de la apariencia de la página, siempre claro está, que esta se visualice en el entorno preciso para el que fue diseñada. Por ejemplo, la unidad ‘pixel’ tiene un valor diferente dependiendo de la resolución de la pantalla y el tipo de ordenador del usuario. Así, normalmente un sistema operativo Windows mantiene una equivalencia de 96px por pulgada, y un Macintosh 72px por pulgada. Si en lugar de pixels se utiliza la medida de puntos (pt) el tamaño del punto depende de la resolución de la pantalla del usuario.

Esta es la razón por la que se recomienda el uso de unidades de medida ‘relativas’, y dentro de estas, el uso de ‘em’.

En origen la unidad ‘em’ era el equivalente a la altura (height) de la ´M´mayúscula. En la actualidad, sin embargo, la unidad ‘em’ alude simplemente al tamaño de la fuente instalada.

La Calculadora Em

Esta herramienta te puede ahorrar tiempo y dolores de cabeza a la hora de maquetar

La Calculadora Em, es una pequeña herramienta JavaScript que ayuda haciendo escalable y accesible el diseño CSS. Convierte el tamaño en píxeles a unidades em relativas, las cuales se basan en un tamaño de texto.

Calculadora Em - Ajustes

Calculadora Em - Sesiones

Fuentes:
Unidades y Medidas
Calculadora Em

Articulos al azar:

One Response to “Recomendaciones acerca del uso de la unidad de medida em [CSS]”

Bitacoras.com dice:

Junio 13, 2009 a las 7:29 am

Información Bitacoras.com…

Valora en Bitacoras.com: Unidades y Medidas El valor de una propiedad se puede expresar por unidades de longitud. Por ejemplo, los valores de font-size y text-indent. Las unidades de longitud consisten en un número seguido de una unidad de medida (cm….

Responder