Ir directamente al contenido de esta página

codexexempla.org

Las palabras clave de font-size

Tabla de contenidos

  1. Introducción
  2. Lo que dice la especificación
  3. Unos ejemplos interesantes
  4. El uso práctico de las palabras clave

Introducción

En 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.

Lo que dice la especificación

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.

Una representación de la tabla de valores calculados desde medium

En 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.

Una ilustración del funcionamiento de los valores larger y smaller

Es 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.

Unos ejemplos interesantes

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.

El uso práctico de las palabras clave

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:

Comprobación de la consistencia de los tamaños absolutos de fuente entre Internet 6 y 7, Firefox 2, Opera 9 y Safari 3 beta

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…

Notas

  1. Una pequeña nota sobre accesibilidad. A pesar de que el nombre puede llamar a confusión, los textos definidos con estas palabras clave son perfectamente escalables, por lo que no inclumplen el punto 3.4 de las WCAG 1.0 (inglés). Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2017 Mapa del sitio | XHTML | CSS | AA