Font-size es un estilo que nos indica el tamaño de la fuente. Esta clase la explicaremos más adelante, en el artículo de estilos de fuente. Ahora lo que vamos a ver son las diferentes unidades de medida en CSS que podemos encontrar.
Pixels: px
Las medidas se miden en pixels. Se escribe de la siguiente manera:
<div style="font-size:10px;">Texto de 10 pixels</div>
<div style="font-size:12px;">Texto de 12 pixels</div>
<div style="font-size:14px;">Texto de 14 pixels</div>
<div style="font-size:16px;">Texto de 16 pixels</div>
<div style="font-size:18px;">Texto de 18 pixels</div>
<div style="font-size:20px;">Texto de 20 pixels</div> |
Y aquí podemos ver el efecto de cada tamaño en el mismo texto:
Texto de 10 pixels Texto de 12 pixels Texto de 14 pixels Texto de 16 pixels Texto de 18 pixels Texto de 20 pixels |
Puntos: pt
Las medidas se miden en puntos. Se escribe de la siguiente manera:
<div style="font-size:15pt;">Texto de 15 puntos</div>
<div style="font-size:20pt;">Texto de 20 puntos</div>
<div style="font-size:25pt;">Texto de 25 puntos</div>
<div style="font-size:30pt;">Texto de 30 puntos</div>
<div style="font-size:35pt;">Texto de 35 puntos</div> |
Y aquí podemos ver el efecto de cada tamaño en el mismo texto:
Texto de 15 puntos Texto de 20 puntos Texto de 25 puntos Texto de 30 puntos Texto de 35 puntos |
Unidades relativas
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.
p { font-size:11px;text-indent: 2em; }
Este ejemplo equivale a un indentado de 22 px para el párrafo a que se aplica
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).
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.
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.
La unidad ex es igual a la altura de la letra x minúscula (la propiedad 'x-height' de la fuente utilizada.
En muchos tipos de fuentes existe la siguiente proporción: un "em" equivale a 1.5 "ex".
