Ir directamente al contenido de esta página
font-sizeEn la especificación de la propiedad font-size de CSS 2.1 (inglés), nos encontramos una serie de valores además de las medidas (absolutas o relativas) y de los porcentajes, agrupados bajo «tamaño absoluto» (absolute-size) y «tamaño relativo» (relative-size). Consisten en una serie de palabras clave cuyos valores debe especificar el agente de usuario, basado en el valor por defecto asignado al tamaño de fuente para un documento.
Resulta curioso, pero con bastante frecuencia en foros y listas de distribución uno se encuentra con que estos valores resultan confusos para muchos desarrolladores, lo que tal vez influya en el hecho de que sean poco empleados. Así que vamos a ver unos cuantos ejemplos de su uso que espero que sean esclarecedores.
La especificación dice que los tamaños absolutos1 son una serie de valores calculados por el agente de usuario que, tomando el valor por defecto para el tamaño de fuente —16 píxeles en los navegadores modernos— como medium, dan lugar a una tabla en la que los valores entre small y xx-small son progresivamente más pequeños, y entre large y xx-large progresivamente más grandes.
mediumEn cuanto a la escala, en la especificación de CSS 1 se aconsejaba un factor de 1.5 (inglés) y en la de CSS 2 uno de 1.2 (inglés), pero las proporciones fijas aplicadas en progresión aritmética demostraron que daban como resultado tamaños excesivamente grandes o excesivamente pequeños en los extremos de la escala, por lo que el W3C decidió dejarlo a criterio del agente de usuario.
Ver un ejemplo de tamaños absolutos aplicados.
Por su parte, los tamaños relativos son dos: larger y smaller. Como su nombre indica, no tienen un valor calculado concreto, sino que modifican el tamaño de fuente situándolo un paso más arriba o más abajo de esta escala, tomando como referencia el tamaño de fuente asignado al elemento padre.
larger y smallerEs decir, que si un padre tiene un valor de small, el valor larger aplicado al hijo hace que el small heredado se convierta en medium. Un xx-small equivaldría a un x-small, un large equivaldría a un x-large, y así sucesivamente.
Ver un ejemplo de tamaños relativos aplicados.
Una vez comprendida la especificación, hay una serie de cuestiones que hay que tener presente a la hora de emplear estos valores de font-size.
La primera es que los tamaños absolutos, por su propia naturaleza, no se ven afectados por el mecanismo de herencia de CSS. Por ello, si, por ejemplo, no definimos el tamaño de fuente de un documento y especificamos una regla como p{font-size:medium;}, el tamaño de fuente de todos los párrafos será equivalente a 16 píxeles; pero si se define una regla adicional como body{font-size:0.7em;}, el tamaño de fuente de los párrafos seguirá siendo el mismo. Compárese este ejemplo en el que no defino tamaño para body, y este otro en el que asigno uno de 0.7 ems.
Por su parte, hemos visto la aplicación de los tamaños relativos sobre un tamaño absoluto heredado, ¿pero qué ocurre si se aplican sobre un valor heredado que tenga una medida o un porcentaje como base? Pues en ese caso, como se puede comprobar aquí, el tamaño resultante es el resultado de aplicar el factor de escala elegido por el agente de usuario al tamaño heredado.
Al trabajar con texto, podemos encontrarnos con algunos cuando asignamos tamaños basados en unidades relativas o porcentajes a los tamaños de fuente. Yo suelo definir para el body de un documento un tamaño en ems, y especificar los tamaños de los encabezados en porcentajes. Lo que ocurre es que los navegadores, al realizar el cálculo del tamaño final de los encabezados pueden verse obligados a redondear el valor, puesto que no puede haber fracciones de píxeles. En consecuencia, dependiendo de si el redondeo es a la alza o a la baja, pueden presentar aspectos diferentes en virtud del navegador. Pero a pesar de que la especificación deja al agente de usuario la responsabilidad de decidir los tamaños de fuente correspondientes a cada una de las palabras clave, la verdad es que los resultados en los navegadores actuales son bastante similares entre sí, como muestran las pruebas con el primer ejemplo:
El resultado anterior para Explorer sólo se obtiene cuando interpreta la página en modo estándar. Compárese el ejemplo anterior con éste en modo quirks. ¿A qué se debe esto? Al legado de la implementación de estos valores de CSS en la versión 4 de este navegador.
Desde dicha versión hay un desajuste de un tamaño de la escala por el cual el tamaño small de Explorer corresponde al medium estándar, el medium a large, y así sucesivamente. El motivo es que en su momento Explorer implementó los valores que Netscape había incluido para font, y que abarcaban desde size="1" a size="7". Como hay siete valores para font-size y había siete valores para font, los hicieron corresponder uno a uno.
Netscape no lo hizo así. Teniendo en cuenta que el valor de font size="3" era el que se consideraba el valor por defecto, hicieron que ese coincidiese con font-size:medium. Así, para ambos navegadores, el valor por defecto del tamaño de letra seguía siendo size="3", pero en la implementación de CSS correspondía al tamaño small para Explorer y medium para Netscape.
En definitiva, si se comprenden, las palabras clave de font-size son otro as en la manga para el desarrollador web. Nunca se sabe…
